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

Question

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

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

基本上，我想知道最好的编码方式是什么。我最初的想法是用一个 img 标签包裹在一个 span 中来显示初始状态 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，并设置图像的背景颜色，以便它可以“渗入”图像的透明部分。

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

这是使用 Sprite 的指南:http://css-tricks.com/css-sprites/