Как перенести фоновое изображение на передний план?

Я пытаюсь составить список «поддельного видео», который на самом деле является изображением с изображением игры на нем. Моя идея - установить значок воспроизведения в качестве фона, а затем привести его перед изображением с помощью z-index, однако, независимо от того, что я делаю, значок по-прежнему остается за содержимым в теге.Как перенести фоновое изображение на передний план?

Это мой код:

HTML:

<ul> 
    <li><img src="http://www.mytinyphone.com/uploads/users/fairytail123/574523.jpg"/></li> 
    <li>test</li> 
    <li>test</li> 
</ul>

CSS:

li { 
    font-size:25px; 
    background:url(http://www.chicagotribune.com/hive/images/video/play_icon_carousel.png); 
    background-repeat:no-repeat; 
    z-index:99999; 
}

Вот jsfiddle: http://jsfiddle.net/ZNeFu/

источник

2014-02-05 Mee

'z-index' работает только с позиционированными элементами. Просто добавьте 'position: relative' ... –

Я боюсь, что это не сработает css background image ... – sinisake

у вас будет значок воспроизведения в отдельном элементе, будь то фоновое или встроенное изображение, так или иначе затем используйте z-index, чтобы расположить этот элемент поверх другого. – Dijon

Для достижения этого можно использовать псевдоэлемент (или другой абсолютно позиционированный элемент).

JSFiddle Demo

HTML

<ul> 
    <li><img src="http://www.mytinyphone.com/uploads/users/fairytail123/574523.jpg"/> 
    </li> 
</ul>

CSS

li { 
    font-size:25px; 
    position: relative; 
    display: inline-block; 
} 

li:before { 
    position: absolute; 
    content:""; 
    width:100%; 
    height:100%; 
    background:url(http://www.chicagotribune.com/hive/images/video/play_icon_carousel.png); 
    background-repeat:no-repeat; 
    background-position: center; 
    background-size: contain; 

}

источник

2014-02-05 17:03:16

только одна проблема здесь, это гнездится li элементов бок о бок – FabioG

@FabioG. Истина, но в противном случае 'li' будет на 100% шириной видового экрана или родительского элемента. Я бы предположил, что в реальной живой среде, что 'li' (или родитель) будет иметь явную ширину. –

-1

добавить position:absolute;, что нужно сделать, это

Или что-то еще position.

Это положение, которое позволяет z-index «перемещать» изображение.

источник

2014-02-05 16:51:40 SaturnsEye

Я пробовал, не работал. Я отредактировал мой пост, добавив jsfiddle, пожалуйста, взгляните. – Mee

каждую часть страницы имеют имеют Z-индекс, как правило, по умолчанию равен 0. поэтому любое время вы хотите что-то сделать впереди, вы используете z-index: 1; и в любое время, когда вы хотите что-то взять обратно, вы используете z-index: -1; позволяет говорить, что у вас есть изображения друг над другом, что-нибудь еще, что вы можете использовать z-index: 2; или more.s Целое значение означает, какой слой является «элементом». , а также все это зависит от положения. в вашем случае я бы использовал абсолютный. Надеюсь, что было полезно понять лучшие свойства наслаивания.

источник

2015-06-15 10:29:28

Как перенести фоновое изображение на передний план?

ответ

Смежные вопросы