8

我在图像上有一个 div，我在悬停时使用它来拥有某种乳白色层，我得到了background-color:rgba(255,255,255,0.1).

当我跨浏览器测试我的网站时，我意识到 IE8 不支持 rgba。所以我想要的是在不支持 rgba 时根本没有乳白色层。下面是我尝试作为后备的内容：

1/ background-color:rgba(255,255,255,0.1);

2/ background-color:transparent; background-color:rgba(255,255,255,0.1);

3/ background-color:none; background-color:rgba(255,255,255,0.1);

通过所有三个尝试，我的图像上有一个完整的空白层。我怎样才能做到这一点？

4

2 回答 2

3

我认为以下将起作用。

将图像包装在容器中：

<div class="img-overlay">
    <img src="http://placekitten.com/200/200">
</div>

应用以下 CSS：

.img-overlay {
    border: 1px solid blue;
    float: left;
    position: relative;
}
.img-overlay:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    filter: alpha(opacity=40); /* internet explorer */
    opacity: 0.4; /* fx, safari, opera, chrome */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*IE8*/
}
img {
    display: block;
}

请参阅http://jsfiddle.net/audetwebdesign/DkRJs/上的演示

这个想法是使用绝对定位将元素定位在图像上，然后应用 opacity 属性。

如果旧版浏览器不支持伪元素，则需要直接放入 HTML 代码中。

注意：我刚刚重新阅读了原始问题并意识到我解决了错误的问题。带来不便敬请谅解。

IE8 问题

我在 IE8 中对此进行了测试，然后才意识到您需要该filter属性才能使其完全向后兼容。

于 2013-09-16T15:56:26.363 回答
1

这并不理想，但您可以使用 1px x 1px 透明 png 作为重复背景图像。您甚至可以使用 IE 条件注释来执行此操作，以便仅针对 IE8。

您还可以使用：

img:hover{opacity:0.8}
于 2013-09-16T15:45:15.260 回答