CSS背景图像在：after元素中

我正在尝试创建一个CSS按钮，并使用：after向其添加一个图标，但图像从未显示。如果我将“background”属性替换为“background color:red”，则会出现一个红色框，因此我不确定这里出了什么问题

HTML:

谢谢你的建议。

几件事

（a） 你不能同时拥有背景色和背景色，背景色永远是赢家。在下面的示例中，我通过速记将它们组合在一起，但这只会在图像不显示时产生颜色作为备用方法

（b） 没有滚动不工作，我不相信它是一个背景图像的有效属性。尝试类似“修复”的方法：

.button:after {
    content: "";
    width: 30px;
    height: 30px;
    background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
    top: 10px;
    right: 5px;
    position: absolute;
    display: inline-block;
}

---

我更新了你的图片，它显示了图片。

正如AlienWebGuy所说，你可以使用背景图片。我建议您使用background，但在URL之后还需要三个属性：

background:url（“http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png）0不重复

说明：两个零是图像的x和y定位；如果要调整背景图像的显示位置，请使用这些选项（可以使用正值和负值，例如：1px或-1px）

“无重复”表示不希望图像在整个背景中重复。这也可以是repeat-x和repeat-y。
看起来我把背景值弄乱了：）谢谢你的回答。我想添加一些在设置<代码>样式时不太明显的东西：在

元素之后：你必须在设置背景（图像）之前设置<代码>内容的值，否则，它不会显示任何内容。如果您碰巧用空格以外的东西填充

内容

，并将其放置在背景（图像）之后，则会显示插入的值和背景图像。

.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}

.button:after {
content: "";
width: 30px;
height: 30px;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}

.green {
background-color: #8ce267;
}

.button:after {
    content: "";
    width: 30px;
    height: 30px;
    background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
    top: 10px;
    right: 5px;
    position: absolute;
    display: inline-block;
}