:after元素中的CSS背景图片 [英] CSS background image in :after element

问题描述

我正在尝试创建一个CSS按钮，并使用:after向其添加图标，但是该图像从不显示.如果我将"background"属性替换为"background-color:red"，则会出现一个红色框，因此我不确定这里出了什么问题.

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.

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)您不能同时拥有背景颜色和背景，背景将永远获胜.在下面的示例中，我通过速记将它们组合在一起，但这只会在图像不显示时作为回退方法产生颜色.

(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.

(b)无滚动不起作用，我不认为这是背景图像的有效属性.尝试类似固定的东西:

(b) no-scroll does not work, i don't believe it is a valid property of a background-image. try something like 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 更新为此，并显示了图像.

I updated your jsFiddle to this and it showed the image.

这篇关于:after元素中的CSS背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！