使用css:：before在图像后面放置模糊的圆

如何获得图像后面的黑色圆圈（阴影）

我使用带有图像精灵的

background

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

虽然如果我把事情颠倒过来，把黑点放在span标签上，把按钮图片放在image标签上，效果会很好，但是有很多这样的按钮，黑点会同时出现，几秒钟后，按钮图片会立即出现在这些点的上面。行得通，但看起来像垃圾

因此，我需要一个解决方案，使按钮图像保持在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>

.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;}

最简单的解决方案： 在图像上使用

z-index:-1；

。这会将它们放置在图标后面。因此添加

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

但我认为，最好不要使用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>
    ....

切换黑点

最简单的修复： 在图像上使用

z-index:-1；

。这会将它们放置在图标后面。因此添加

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

但我认为，最好不要使用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>
    ....

切换黑点

最简单的修复： 在图像上使用

z-index:-1；

。这会将它们放置在图标后面。因此添加

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

但我认为，最好不要使用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>
    ....

切换黑点

最简单的修复： 在图像上使用

z-index:-1；

。这会将它们放置在图标后面。因此添加

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

但我认为，最好不要使用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>
    ....

切换黑点

Z-Index是你的朋友

.smallIconSprite{
z指数：-1；
位置：相对位置；
顶部：-10px；
左：-15px；
宽度：45px；
高度：45px；
}

Z-Index是你的朋友

.smallIconSprite{
z指数：-1；
位置：相对位置；
顶部：-10px；
左：-15px；
宽度：45px；
高度：45px；
}

Z-Index是你的朋友

.smallIconSprite{
z指数：-1；
位置：相对位置；
顶部：-10px；
左：-15px；
宽度：45px；
高度：45px；
}

Z-Index是你的朋友

.smallIconSprite{
z指数：-1；
位置：相对位置；
顶部：-10px；
左：-15px；
宽度：45px；
高度：45px；
}

你考虑过使用CSS阴影吗？我很乐意使用任何在图像后面放置圆形阴影的方法。唯一的问题是我必须保持

span

标记的原样，因为复杂的javascript需要当前的

div

-

span

-

img

布局。img标记必须是present，但不必是阴影的来源。我愿意接受任何在每个图像后面放置黑色阴影的解决方案。您考虑过使用CSS阴影吗？我很乐意使用任何在图像后面放置圆形阴影的方法。唯一的问题是我必须保持

span

标记的原样，因为有复杂的javascript这需要当前的

div

-

span

-

img

布局。img标签必须存在，但不必是阴影的来源。我愿意接受任何在每个图像后放置黑色阴影的解决方案。您考虑过使用CSS阴影吗？我很乐意使用任何在图像后放置圆形阴影的方法。o唯一需要注意的是，我必须保持

span

标记的原样，因为复杂的javascript需要当前的

div

-

span

-

img

布局。img标记必须存在，但不必是阴影的来源。我愿意接受任何在每个图像后面放置黑色阴影的解决方案。你是否同意是否需要使用CSS阴影？我很乐意使用任何在图像后面放置圆形阴影的方法。唯一的问题是我必须保持

span

标记的原样，因为复杂的javascript需要当前的

div

-

span

-

img

布局。img标记必须存在，但不需要存在阴影的来源。我对在每张图像后面放置黑色阴影的任何解决方案都持开放态度。谢谢各位。我努力理解如何使用：：before和：：posterhanks tons。我努力理解如何使用：：before和：：posterhanks tons。我努力理解如何使用：：before和：：posterhanks tons。我正在努力理解如何使用：：before和：：after