Question

我发誓我见过人们使用：after选择器将多个背景图像添加到元素中。无论出于何种原因，我无法让它发挥作用。我究竟做错了什么？有人能指出我一个有效的例子吗？

#el li { background:url(image1.jpg) top center;}
#el li:after { background:url(image2.jpg) bottom center;}

谢谢！

Answer 1

正如Blender所说，有一些类型的dom节点作为内容添加到元素内容的末尾。但是，您还需要提供某种内容AFAICT才能使其正常工作。

<ul id="el">
    <li>Hello world</li>
</ul>

#el li {
    background:url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG) top center no-repeat;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
#el li:after {
    background:url(http://www.gravatar.com/avatar/05a3a91994b86e4e45246b57b0ec3c7d?s=128&d=identicon&r=PG) bottom center;
    content: " ";
    display: block;
    position: relative;
    height: 500px;
    z-index: -100;
}

http://jsfiddle.net/QhUsS/

Answer 2

:before和:after始终需要以下内容：

{
    content: '';
}

Answer 3

使用CSS3可以通过

完成

#el li {
   background: url(image1.jpg), url(image2.jpg);
   background-position: top center, bottom center;
   background-repeat: no-repeat;
}

Answer 4

你可以做到，但我从未尝试过。 :after似乎在元素之后创建了一个类似内联的元素。您可以尝试添加此CSS（不知道是否有效）：

display: block;

position: relative;
top: -200px;

height: 200px;
width: 200px;

工作示例：带有/多个背景图像的css选择器之后？

4 个答案: