:after 元素中的 CSS 背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14695365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background image in :after element
提问by Brian Spilner
I'm trying to create a CSS button and add an icon to it using :after, but the image never shows up. If I replace the 'background' property with 'background-color:red' then a red box appears so I'm not sure what's wrong here.
我正在尝试创建一个 CSS 按钮并使用 :after 为其添加一个图标，但图像从未出现。如果我用 'background-color:red' 替换 'background' 属性，则会出现一个红色框，所以我不确定这里有什么问题。
HTML:
HTML：
<a class="button green"> Click me </a>
CSS:
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.
Thanks for any tips.
感谢您提供任何提示。
回答by PlantTheIdea
A couple things
几件事
(a) you cant have both background-color and background, background will always win. in the example below, i combined them through shorthand, but this will produce the color only as a fallback method when the image does not show.
(a) 你不能同时拥有背景颜色和背景，背景总是会赢。在下面的示例中，我通过速记将它们组合在一起，但这只会在图像未显示时作为后备方法产生颜色。
(b) no-scroll does not work, i don't believe it is a valid property of a background-image. try something like fixed:
(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;
}
I updated your jsFiddleto this and it showed the image.
我将你的jsFiddle更新为这个，它显示了图像。
回答by Sean
As AlienWebGuy said, you can use background-image. I'd suggest you use background, but it will need three more properties after the URL:
正如 AlienWebGuy 所说，您可以使用 background-image。我建议您使用背景，但在 URL 之后还需要三个属性：
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;
Explanation: the two zeros are x and y positioning for the image; if you want to adjust where the background image displays, play around with these (you can use both positive and negative values, e.g: 1px or -1px).
说明：两个零是图像的x和y定位；如果您想调整背景图像的显示位置，请使用这些（您可以使用正值和负值，例如：1px 或 -1px）。
No-repeat says you don't want the image to repeat across the entire background. This can also be repeat-x and repeat-y.
无重复表示您不希望图像在整个背景中重复。这也可以是repeat-x 和repeat-y。
