css造型按钮

我想让我的按钮响应，所以我不能使用图像与背景一起。我只能使用购物车的第二张照片，但如何设计它的样式，所以它的一部分仍然在外面？css造型按钮

enter image description here

2015-01-16 Eleonora Velikova

这是一个有点不清楚你想要什么。你能否展示你的尝试并提供具体问题？ – user3479671

向我们展示一些代码。你已经尝试了什么？ – roNn23

您是否拥有购物车图标本身的副本，背后没有彩色背景？最简单的方法是使用生成的内容添加购物车（例如，“.btn :: before {}”，但如果没有，那么......好吧，这会使事情变得复杂化 – Alhadis

您可以应用的background-image到：一个button元素的伪元素，并使用top和left性质放置它们。

button { 
 
    position: relative; 
 
    width: 20%; 
 
    height: 35px; 
 
    background: #B7004A; 
 
    border: none; 
 
    border-radius: 5px; 
 
} 
 
button:before { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 110%; 
 
    top: -7px; 
 
    left: -3px; 
 
    background: url(http://i.stack.imgur.com/Aiy4E.png) no-repeat; 
 
    background-size: auto 105%; 
 
}

<button></button>

来源

2015-01-16 13:41:23

通常就是这个想法。谢谢 –

@EleonoraVelikova - You're Welc青梅。 :) –

难道这样的事情你正在寻找？

的jsfiddle：http://jsfiddle.net/vgayjg9j/2/

编辑：更新的jsfiddle。它现在突出了。

<button><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/shoping_cart.png" /></button> 

button { 
    width: 120px; 
    height: 40px; 
} 
button img { 
    height: 100%; 
    float:left; 
}

来源

2015-01-16 13:20:03

购物车应该部分位于彩色包装盒的外面，这就是问题 –

I更新了小提琴！ –

我试图让它使用CSS背景属性，但它应该看起来像这样 –

从你的问题我想你想按钮来填充屏幕，如果它是在较小的设备上？

媒体查询是你应该开始的地方。

同时确保如果你想你按钮来填充屏幕的CSS会是这个样子，你用％为按钮的宽度，例如：

button { 
    width: 100%; 
}

如果图像不应该改变然后我会以像素为单位定义图像的宽度：

button img { 
    width: 40px; 
}

来源

2015-01-16 13:24:28 Pianoc

我使用宽度的百分比，我只是想让购物车部分地在按钮外面 –

：http://jsfiddle.net/shannabarnard/vgayjg9j/1/ – Pianoc

回答

相关问题