Рабочие примеры: после выбора CSS с несколькими фоновыми изображениями?

Question

Клянусь, я видел, как люди добавляли несколько фоновых изображений в элемент, используя селектор: after.По какой-то причине я не могу заставить его работать.Что я делаю неправильно?Может кто-нибудь указать мне рабочий пример?

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

Спасибо!

Answer 1

Как отмечает Блендер, в конец содержимого элемента добавляется некоторый тип 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;