在CSS中使用透明背景RGBA背景

2018-06-04 22:23:31

我有一个div用于悬停图像，使用background-color:rgba(255,255,255,0.1)获得某种乳白色图层background-color:rgba(255,255,255,0.1) 。

当我跨浏览器测试我的网站时，我意识到rgba不被IE8支持。所以当我不支持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}

链接地址: http://www.djcxy.com/p/15837.html

上一篇: Having a fallback for a transparent background RGBA background in CSS

下一篇: Is the branch after "origin" the local branch or the remote branch?