我正在尝试创建一个 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;
}
You can check this fiddle to see what I mean exactly.
感谢任何提示。
最佳答案
一些事情
(a) 你不能同时拥有背景颜色和背景,背景总是会赢。在下面的示例中,我通过速记将它们组合在一起,但这只会在图像不显示时作为后备方法生成颜色。
(b) no-scroll 不起作用,我不认为它是背景图像的有效属性。尝试固定的东西:
.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为此,它显示了图像。
关于:after element 中的 CSS 背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14695365/