css - 使用 css::before 将模糊的圆圈放在图像后面

Question

我如何得到图像后面的黑圈(阴影)？

jsFiddle Demo

我将 background 与图像 sprite 一起使用，以在 span 标签上放置圆形按钮图像。我希望在每个图像后面放置一个阴影以获得视觉效果，但无法将黑点放在按钮图像后面。

虽然如果我颠倒过来，将黑点放在 span 标签上，将按钮图片放在图像标签上，它会起作用，有很多这样的按钮，黑点同时出现，并在几秒钟后出现按钮图像全部同时出现在点的顶部。有效，但看起来像废话。

因此，我需要一个解决方案，将按钮图像保留在 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 标签会更好。毕竟，它们仅用于背景，在文档中没有任何语义值(value)。您的 HTML 可能如下所示:

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

您可以使用 ::before 和 ::after 伪元素，而不是在 span 上设置图像，在 img 标签中设置背景.这样就可以在after设置图片，在before设置背景，图片自动置顶。 span 本身仅用于定位，(在本例中)没有任何可见的特征。

通过使用伪元素，您甚至根本不需要 img 标签，这很好，因为它仅用于阴影，不会为文档添加语义值。

只要将position: relative 添加到span 中，就可以对前后元素使用absolute 位置。

在这种情况下，我仍然使用您的阴影图像，但您也可以尝试使用 CSS 阴影。此外，您可以将阴影作为 sprite 添加到按钮图像，这样您就只有一个背景图像。

.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