中的CSS背景图像:after元素
中的CSS背景图像:after元素
提问于 2013-02-05 04:48:06
我正在尝试创建一个CSS按钮，并使用:after为其添加一个图标，但图像从未出现。如果我将“background”属性替换为“background-color: red”，那么就会出现一个红色的框，所以我不知道这里出了什么问题。
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.
谢谢你的建议。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-05 04:50:32
有几件事
(a)你不能同时拥有背景色和背景，背景总是胜出。在下面的示例中，我通过速记将它们组合在一起，但这只会在图像不显示时作为后备方法生成颜色。
(b) no-scroll不起作用，我不认为它是背景图像的有效属性。尝试像fixed这样的东西：
.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，它显示了这张图片。
Stack Overflow用户
发布于 2013-02-05 04:55:36
正如AlienWebGuy所说，你可以使用背景图像。我建议你使用background，但它在URL之后还需要三个属性：
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;
说明:这两个零是图像的x和y位置；如果您想调整背景图像的显示位置，可以使用这两个值(您可以使用正值和负值，例如: 1px或-1px)。
无重复表示您不希望图像在整个背景中重复。这也可以是-x和-y。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14695365
复制相关文章
相似问题