使用CSS在悬停时覆盖透明图像

我试图在悬停时使用CSS覆盖透明图像。使用CSS在悬停时覆盖透明图像

有一个答案here但它不能在IE7或IE8中工作。谁会知道如何做到这一点？

我想保持超级光，所以不真的想使用JS或类似的东西。

谢谢

来源

2011-04-13 TheTub

仅由一种颜色的图象TRANSPARANT？ – Martijn 2011-04-13 10:20:59

你能发布你正在使用的标记吗？也许分享一个[JS小提琴演示]（http://jsfiddle.net/）向我们展示你试过了什么？ – 2011-04-13 10:29:22

你可以在这里看到效果 - http://www.nightlylabs.com/uploads/test.html。它适用于FF，Chrome而不是IE。 – TheTub 2011-04-13 10:39:43

我检查你的链接，并基于与this solution想出了。

HTML：

<div class="image"> 
    <img src="xy.jpg" alt="" /> 
    <img class="hoverimage" src="xy_hover.jpg" alt="" /> 
</div>

CSS：

.image { position: relative; width: 184px; height: 219px; } 
.hoverimage { position: absolute; top: 0; left: 0; display: none; } 
.image:hover .hoverimage { display: block; }

应该在所有的浏览器包括IE8和IE7工作。它不会在IE6中工作，因为它只允许：悬停在某些元素上，如链接（<a>）。如果您要支持IE6，请将.image更改为<a>而不是<div>，并将其设置为display: block;。

来源

2011-04-13 10:39:44 kapa

辉煌。作品一种享受。非常感谢。 – TheTub 2011-04-13 10:50:26

-1

通常我们重新创建应该有一个透明覆盖在.png格式的图像。 .Jpeg是一种不支持透明度的平面图像格式。

我们采取的下一个步骤是有这样的事情：

<div style="Background-Image:Url(BackgroundImage.Jpg);Width:500px;Height:500px" > 
    <div style="Background-Image:Url(OverlayImage.Png);Width:50%;Height:50%" > 
    ... 
    </div> 
</div>

这是最接近我怎么能明白你的问题

来源

2011-04-13 10:27:12 Eon

这里很远，但是尝试将

更改为

– Eon 2011-04-13 10:33:18

同样的问题。适用于除IE外的所有内容。 – TheTub 2011-04-13 10:38:48

这仍然不能在IE7/8 AFAIK上工作，所以我恐怕这不会回答这个问题。

但是，当我忘记如何使用现代方法进行这项工作时，我已经结束了这个页面，因此我将答案放在这里以供参考。

我只能通过将img放在容器/包装div中做到这一点，因为img元素不会接受像:after这样的伪类。

<div class="container"><img src="http://placekitten.com/240/320" alt="icanhaz"></div>

然后CSS被设计为在悬停时提供一个伪元素。

.container { 
    position: relative; 
} 
.container:hover:after { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 

    background: rgba(0,0,0,0.5); /* Here you may also use images, gradients, etc */ 
}

参见示例here

来源

2013-03-29 18:11:01

使用CSS在悬停时覆盖透明图像

回答

相关问题