Question

我需要一个带有图片bg的div来覆盖图像（有一定量的透明度）。我需要能够拥有一个透明覆盖层，可以在任何图像上的整个站点中使用和重用。我的第一次尝试是至少要说的。因为我发现你不能翻转一个看不见的div我设计了一个三明治系统，其中原始图像是第一层，叠加是第二层，原始图像再次是第三层。这样，当您翻转时，原始图像会消失，从而在原始图像上显示叠加图像：

http://www.nightlylabs.com/uploads/test.html

所以它有效。均田。因为你无法与可见性交互：隐形元素（为什么？！）翻转闪烁，除非你把光标放在它上面。

有任何帮助吗？这种方法很糟糕，所以如果有人有更好的方法，请发表评论。

Answer 1

我使用了以下css及其罚款。

#container { position:relative; width:184px; height:219px;}
    .image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;}
    .overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;}
    .top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;}
    .top-image:hover { background-image:none;}

Answer 2

图像闪烁，因为你不能将鼠标悬停在不存在的东西上。如果你正常分层（不需要z-index）并使其透明，它将继续显示并且可以悬停在它上面。第二个图像不会闪烁，您可以使用span标记控制样式。这是我使用的一些CSS：

img.side
    {position:absolute;
    border:1px solid black;
    padding:5px 5px 5px 5px;
    float:center;}
    /*normal base images*/

img:hover+span
        {display:block;}
    /*new images. automatically display beneath base/hover image*/

.side:hover
        {opacity:0;}
    /*base images again, only when hovered over*/

span
        {display:none;
        cursor:pointer;}

悬停标记确定基础img（和基础div）的样式，hover + span定义仅在悬停时出现的img样式。

这是完全显示div的html：

    <div class="only" id="one">
            <img class="side" id="ach" src="ach.svg">Academic</a>
                <span>
                <img class="hovering" id="hach" src="Hach.svg">Academic</a>
                </span>
        </div>

希望这有帮助。

在CSS中悬停叠加图像

2 个答案: