在悬停时在内容图像上显示透明图像的最佳方法？

Question

我正在开发一个图形导航菜单，它使用方形图像作为初始状态，每个图像还有一个在每个图像上垂直和水平居中的图标。我正在尝试找出实现悬停状态的最佳方法（居中的图标会改变颜色并添加阴影）。最初我所做的是将两种状态的图像保存为 jpg 图像。我收到的效果不是我想要的，因为在初始悬停时会有一瞬间，在加载悬停图像时图像会消失。

然后我决定最好将初始状态图像保持为纯 jpg，然后使用仅具有悬停状态的图标的透明背景图像。

基本上，我想知道最好的编码方式是什么。我最初的想法是使用一个包裹在span中的img标签来显示初始状态jpg，然后通过CSS在span悬停状态上设置一个背景图像。但是，我遇到了无法让背景图像出现在嵌入内容中的图像上方的问题（我尝试使用 z-index 无济于事）。

谁能建议最好的解决方法是什么？

这是我迄今为止尝试过的代码：

<div class="nav">
    <div class="frame facts"><span><img src="img/layout/nav/facts.jpg" /></span></div>
    <div class="frame tips"><span><img src="img/layout/nav/tips.jpg" /></span></div>
    <div class="frame events"><span><img src="img/layout/nav/events.jpg" /></span></div>
    <div class="frame community"><span><img src="img/layout/nav/community.jpg" /></span></div>
    <div class="frame about"><span><img src="img/layout/nav/about.jpg" /></span></div>
    <div class="frame donate"><span><img src="img/layout/nav/donate.jpg" /></span></div>
</div>

还有 CSS：

.nav .frame {
    width:calc(100% / 6);
    height:163px;
    float:left;
    cursor:pointer;
    position:relative;
}
    .nav .frame img {
        z-index:5
    }
    .nav .frame.facts span:hover {
        background:url('../img/layout/nav/facts_over.png'); /*Transparent hover state icon*/
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        z-index:1000
    }

谢谢！

Answer 1

如果您只需要更改一种颜色，您可以对更改的部分使用具有透明度的 png，并设置图像的背景颜色，以便它可以“渗出”图像的透明部分。

另一种选择是使用图像精灵作为导航元素，这意味着您可以将导航按钮和状态合并到一个大图像中，并操纵元素的背景位置，以便在适当的状态下可以看到正确的部分。

这里是使用精灵的指南：http://css-tricks.com/css-sprites/