:after 元素中的 CSS 背景图像

我正在尝试创建一个 CSS 按钮并使用 :after 添加一个图标，但图像从未显示。

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

你可以检查这个小提琴来明白我的意思。

感谢您的任何提示。

答案

有几件事

(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对此，它显示了图像。

来自: stackoverflow.com

答案#

答案