Question

如何获取图像背后的黑圈（阴影）？

我正在使用带有图片精灵的background来定位span标签上的圆形按钮图像。我希望在每个图像后面留一个阴影以获得视觉效果，但不能将黑点置于后面的按钮图像。

虽然它可以解决问题并将黑点放在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>
    ....

您可以使用::before和::after伪元素，而不是在跨度和img标记中的背景上设置图像。这样，您可以在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; }

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

2 个答案: