将嵌入阴影放在背景图像后面

Question

这似乎只是其他人想要的另一种方式。我有一个像这样http://jsfiddle.net/kbu6szvb/ 的菜单/导航栏。

HTML：

<div id="nav"> 
<ul> 
<li id="special"><a href="">A</a></li> 
<li><a href="">B</a></li> 
<li><a href="">C</a></li> 
<li><a href="">D </a></li> 
<li><a href="">E</a></li>
</ul> 
</div>

CSS：

li {
    float: left;
    display: block;
}

a {
    display: block;
    transition: all 0.6s ease;
    padding: 15px;
    width: 25px;
    height: 25px;
}

a:hover {
        -webkit-box-shadow: inset 0px -50px 0px 0px rgba(229,229,229,0.8);
        -moz-box-shadow: inset 0px -50px 0px 0px rgba(229,229,229,0.8);
        box-shadow: inset 0px -50px 0px 0px rgba(229,229,229,0.8);
}

#special a {
        display: block;
        background-image: url('http://techcommunity.softwareag.com/c/wiki/get_page_attachment?p_l_id=10602&nodeId=11809&title=Preparing+Graphics+For+Your+Mobile+application&fileName=Preparing+Graphics+For+Your+Mobile+application%2FIconTrans.png');
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: center;
        text-indent: -9000px;
    }

当您将鼠标悬停在元素上时，它们会从下到上用灰色填充。但我想要一个具有图像作为背景图像的主页按钮。当菜单元素为 .active 时，它​​应被完全填充且不透明。可悲的是，正如您在小提琴中看到的那样，插入框阴影位于背景图像上方而不是下方。

提前致谢

Answer 1

背景图片位于元素的最底部（背景），因此要低于它，它必须被至少一个元素包裹。

您可以将灰色悬停移动到<a> 后面的<li>，也可以保留您的代码并使用带有背景图片的<span>。

这个更新的小提琴演示了将悬停移动到<li>：http://jsfiddle.net/kbu6szvb/1/