在CSS中有一个透明背景RGBA背景后备箱

我在悬停图片上有一个div，它具有某种乳白层，我通过background-color:rgba(255,255,255,0.1)获得了这种图像。在CSS中有一个透明背景RGBA背景后备箱

由于我跨浏览器测试我的网站，我意识到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);

所有三次尝试，我有一个完整的空白图层我的形象。我怎样才能做到这一点？

来源

2013-09-16 Marc

我觉得下面的工作。

裹在一个容器中的图像：

<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属性，使其完全向后兼容。

来源

2013-09-16 15:56:26

这并不理想，但您可以使用1px x 1px透明PNG作为重复背景图像。你甚至可以使用IE条件注释来做到这一点，只是为了瞄准IE8。

您还可以使用：

img:hover{opacity:0.8}

来源

2013-09-16 15:45:15 DesignSubway

你好。我不想尝试重现透明度。我试图没有背景色作为后备。 – Marc

在这种情况下，我会使用条件CSS（请参阅http://www.quirksmode.org/css/condcom.html）并添加background-color：none; – DesignSubway

在CSS中有一个透明背景RGBA背景后备箱

回答

相关问题