样式按钮的css

我想让我的按钮具有响应性，所以我不能将图像与背景一起使用。我只能使用购物车的第二张图片，但是如何设置它的样式，使它的一部分保持在外面

---

你要找的是这样的东西吗

jsFiddle：

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

<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;
}

钮扣{
宽度：120px；
高度：40px；
}
按钮式img{
身高：100%；
浮动：左；
}

从您的问题中，我想如果屏幕在较小的设备上，您想用按钮填充屏幕吗

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

另外，请确保使用%作为按钮的宽度，例如，如果希望按钮填充屏幕，css将如下所示：

button {
  width: 100%;
}

如果图像不应该改变，那么我将以像素为单位定义图像的宽度：

button img {
  width: 40px;
}

---

您可以将

背景图像

应用于

按钮

元素的：伪元素，并使用

顶部

和

左侧

属性定位它们

按钮{
位置：相对位置；
宽度：20%；
高度：35px；
背景#B7004A；
边界：无；
边界半径：5px；
}
按钮：之前{
位置：绝对位置；
内容：''；
宽度：100%；
身高：110%；
顶部：-7px；
左：-3px；
背景：url(http://i.stack.imgur.com/Aiy4E.png)不重复；
背景尺寸：自动105%；
}

---

你到底想要什么有点不清楚。你能展示你的尝试并提供具体的问题吗？给我们一些代码。你已经试过什么了？你有没有一个购物车图标的副本，没有彩色背景？最简单的方法是使用生成的内容（例如，“.btn:：before{}”）添加购物车，但如果不是，那么……这会使事情复杂化无重复左中-a8274c；图像保留在框内，我希望它的一部分位于外，如图所示。我使用%表示宽度，我只想使购物车部分位于按钮外。购物车应部分位于彩色框外。这就是问题所在。我正试图使用css背景属性使其位于外，但看起来应该是这样一般来说，就是这个主意。谢谢you@EleonoraVelikova-不客气。：）