Css不透明度和图像

时间:2013-08-21 08:38:22

标签: css css3 opacity

我的div里面的图像有透明度,问题在于这个图像,div需要是trasparent而没有图像,当在div中使用不透明度时,图像也会变成这种不透明度,这就是问题

#cp_advise
{
position:absolute;
width:100%;
height:99%;
left:50%;
margin-left:-50%;
background-color:#111;
z-index:999;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
text-align:center;
}




<div id="cp_advise">
<img src='services.png'>
</div>

我尝试在图像上使用z-index但是继续问题

谢谢,问候!

3 个答案:

答案 0 :(得分:1)

不要使用opacity,而是使用rgba之类的background-color: rgba(255,255,255,.6);

因此,在您的情况下,背景颜色为background-color:#111;,因此您可以使用

background-color: rgba(17,17,17,.6);

a代表alpha。另请确保在以background-color: #111;格式声明背景之前使用rgba作为后备广告。

background-color: #111; /* Fallback, and than declare rgba below */
background-color: rgba(17,17,17,.6);

答案 1 :(得分:1)

在div上使用半透明颜色:

background-color:rgba(17,17,17,0.6);

答案 2 :(得分:0)

将不透明度设置为DIV时,所有内容都会应用此属性。您应该只在背景上设置不透明度。

在这里,您可以找到有关如何操作以及跨浏览器兼容的完整说明

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/