CSS背景图片:元素之后

Question

我正在尝试创建一个CSS按钮并使用以下内容添加一个图标:after,但图像永远不会出现.如果我用'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;
}

你可以检查这个小提琴,看看我的意思.

谢谢你的任何提示.

Answer 1

几件事

(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,它显示了图像.

Answer 2

正如AlienWebGuy所说,你可以使用背景图像.我建议您使用背景,但在URL之后还需要三个属性:

background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;

说明:两个零是图像的x和y定位; 如果你想调整背景图像的显示位置,可以使用它们(你可以使用正值和负值,例如:1px或-1px).

不重复说你不希望图像在整个背景中重复.这也可以是repeat-x和repeat-y.