Question

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

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

基本上，我想知道编码的最佳方法是什么。我最初的想法是使用包含在跨度中的img标记来显示初始状态jpg，然后通过CSS在跨度悬停状态上设置背景图像。但是，我遇到的问题是我无法将背景图像显示在内容中嵌入的图像上方（我尝试使用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/

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

1 个答案: