CSS背景图片在：元素后

我试图创建一个CSS按钮，并添加一个图标使用：以后，但图像永远不会显示。如果我用’background-color：red’替换’background’属性，那么会显示一个红色框，所以我不知道这里有什么问题。

HTML：

<a class="button green"> Click me </a>

CSS：

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

You can check this fiddle to see what I mean exactly.

感谢任何提示。

解决方法

几件事情

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

我更新了你的jsFiddle，并显示了这个形象。

原文地址：https://www.jb51.cc/css/218475.html