我在悬停时使用的图像上有一个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);
通过所有三次尝试,我的图像上有一个完整的空白层。我怎样才能做到这一点?
我认为以下内容将起作用。
将映像包装在容器中:
<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/观看演示
这个想法是使用绝对定位将元素定位在图像上,然后应用不透明度属性。
如果较旧的浏览器不支持伪元素,则需要直接放入 HTML 代码。
注意:我只是重读了原来的问题,意识到我解决了错误的问题。很抱歉给您带来不便。
IE8 问题
我在IE8中对此进行了测试,刚刚意识到您需要filter
属性才能使其完全向后兼容。
这并不理想,但您可以使用 1px x 1px 透明 png 作为重复的背景图像。您甚至可以使用 IE 条件注释来执行此操作,以便仅针对 IE8。
您还可以使用:
img:hover{opacity:0.8}