Использование css :: перед тем, чтобы поместить размытый круг за изображением

Question

Как получить черные круги (тени) за изображениями?

jsFiddle Demo

Я использую background с спрайтов в положение круглых изображений кнопок на пролетных тегов. Я хочу поместить тень позади каждого изображения для визуального эффекта, но не могу позиционировать черные точки за изображения кнопок.

Хотя он работает, если я отменяю вещи и помещаю черную точку на тег span, а кнопка pic на теге изображения, , есть много таких кнопок, и черные точки появляются сразу, а через несколько секунд изображения кнопок появляются сразу над точками. Работает, но выглядит как дерьмо.

Итак, мне нужно решение, которое сохраняет изображения кнопок на тегах span и как-то позиционирует размытый черный круг (тень) за фоновым изображением тега span.

Вот что я пытался (обратите внимание отключенную попытку использовать ::before псевдо-класс

HTML:.

<div class="container"></div> 
<div class="TabMenu"> 
    <span id="sml_1"><img class="smallIconSprite" src="blank.png" width="40" height="40" /></span> 
    <span id="sml_2"><img class="smallIconSprite" src="blank.png" width="40" height="40" /></span> 
    <span id="sml_3"><img class="smallIconSprite" src="blank.png" width="40" height="40" /></span> 
    <span id="sml_4"><img class="smallIconSprite" src="blank.png" width="40" height="40" /></span> 
    <span id="sml_5"><img class="smallIconSprite" src="blank.png" width="40" height="40" /></span> 
    <span id="sml_6"><img class="smallIconSprite" src="blank.png" width="40" height="40" /></span> 
</div> 

CSS:

.container{width:800px;height:620px;padding-left:108px;margin-left:-400px;} 
.container{background-image:url(background.jpg);background-repeat:no-repeat;} 

.TabMenu{position:absolute;left:0;top:50px;z-index:1;} 
.TabMenu{width:200px;height:700px;margin-left:320px;margin-top:55px;} 

.TabMenu span{display:inline-block;height:35px;width:31px;margin:1px 7px;padding:5px 0px 0px 10px;} 
.TabMenu span{background-image:url(button_icons.gif);background-repeat:no-repeat;} 
.TabMenu span:hover{opacity:0.8;cursor:pointer;} 

xxx.TabMenu span::after{width:46px;height:46px;content:url(blackdot.png);position:relative;top:-55px;left:-18px;} 

.smallIconSprite{position:relative;top:-10px;left:-15px;width:45px;height:45px;} 
.smallIconSprite{background-image:url(blackdot.png);background-repeat:no-repeat;background-position:-5px -5px;} 

#sml_1{background-position:0px 0px;} 
#sml_2{background-position:-40px 0px;} 
#sml_3{background-position:-80px 0px;} 
#sml_4{background-position:0px -40px;} 
#sml_5{background-position:-40px -40px;} 
#sml_6{background-position:-80px -40px;} 

Answer 1

Самое простое исправление: Используйте изображения z-index: -1;. Это поместит их за значками. Поэтому добавьте

img.smallIconSprite { z-index: -1; } 

Updated fiddle.

Но я думаю, что лучше не иметь тегов img. В конце концов, они предназначены только для фона и не имеют семантического значения в документе. Ваш HTML может выглядеть следующим образом:

<div class="TabMenu"> 
    <span id="sml_1"></span> 
    <span id="sml_2"></span> 
    <span id="sml_3"></span> 
    <span id="sml_4"></span> 
    .... 

Вместо установки изображения на пролете, а фон в IMG тег, вы можете использовать ::before и ::after псевдо-элементы для обоих. Таким образом, вы можете установить изображения в after, фон в before, и изображение автоматически будет сверху. Сам диапазон используется только для позиционирования и (в этом случае) не имеет видимых характеристик.

Используя псевдоэлементы, вам даже не нужен тег img, что хорошо, поскольку он предназначен только для тени и не добавляет семантического значения в документ.

Вы можете использовать позицию absolute для элементов до и после, пока вы добавляете position: relative к пролету.

В этом случае я по-прежнему использовал теневое изображение, но вы также можете попробовать использовать тени CSS. Кроме того, вы можете добавить тень к изображению кнопки в качестве спрайта, чтобы у вас было только одно фоновое изображение.

.container{ 
 
    width:800px;height:620px;padding-left:108px;margin-left:-400px; 
 
    background-image: url(http://goodwinstudio.com/_dev/images/bg_filmprojects.jpg); 
 
    background-repeat: no-repeat; 
 
} 
 

 
.TabMenu{position:absolute;left:0;top:50px;z-index:1;} 
 
.TabMenu{width:200px;height:700px;margin-left:320px;margin-top:55px;} 
 

 
/* Position the buttons */ 
 
.TabMenu span{ 
 
    display:inline-block; 
 
    height:40px; 
 
    width:40px; 
 
    margin:7px 7px; 
 
    position: relative; 
 
} 
 
/* Images are positioned at 0,0 inside the span */ 
 
.TabMenu span:after{ 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height:100%; /* Or just 40px */ 
 
    width:100%; 
 
    background-image: url(http://goodwinstudio.com/_dev/img/btns5.gif); 
 
    background-repeat:no-repeat; 
 
} 
 
.TabMenu span:hover:after{opacity:0.8;cursor:pointer;} 
 

 
/* Shadow image has a slightly negative offset */ 
 
.TabMenu span::before{ 
 
    width: 46px; 
 
    height:46px; 
 
    content: url(http://goodwinstudio.com/_dev/images/bgactive2.png); 
 
    position:absolute; 
 
    top:-6px; 
 
    left:-6px; 
 
} 
 

 

 
#sml_1:after{background-position:0px 0px;} 
 
#sml_2:after{background-position:-40px 0px;} 
 
#sml_3:after{background-position:-80px 0px;} 
 
#sml_4:after{background-position:0px -40px;} 
 
#sml_5:after{background-position:-40px -40px;} 
 
#sml_6:after{background-position:-80px -40px;}

<div class="container"></div> 
 
<div class="TabMenu"> 
 
    <span id="sml_1"></span> 
 
    <span id="sml_2"></span> 
 
    <span id="sml_3"></span> 
 
    <span id="sml_4"></span> 
 
    <span id="sml_5"></span> 
 
    <span id="sml_6"></span> 
 
</div> 
 
<button>Toggle Black Dot</button>

Updated Fiddle

Answer 2

Z-Index является вашим другом.

.smallIconSprite{ z-index:-1; position:relative; top:-10px; left:-15px; width:45px; height:45px; }