Question

我有一个div元素opacity: 0.7;。我设置它是因为我希望其中的所有文本都是不透明的。在这个div里面我想要显示一些图像，但我想在这些图像上有100％的不透明度，而不是0.7。我尝试将opacity: 1;设置为图像，但无论如何都显示为不透明。

我该如何解决这个问题？我一直在搜索，但找不到任何解决方案。

由于

Answer 1

具有透明度（opacity＆lt; 1）的元素的子元素不能比其父元素透明度低。所以opacity: 1只会使子元素与其父元素一样透明，但不会如此。

要获得部分透明的文字，您可以使用：

div {
    color: rgba(0,0,0,0.7);
}

JS Fiddle demo

我认为支持opacity属性的浏览器支持。

Answer 2

您可以在CSS中使用rgba(0,0,0,0.7);颜色值作为背景和文字颜色：

div
{
    background: rgba(100,12,100,0.7);
    color: rgba(0,0,0,0.7);
}

您可以将#hex颜色代码转换为rgb here。

http://jsfiddle.net/Kyle_Sevenoaks/FQKXv/

FOR IE

您可以使用他们的filter代码：

div 
{ 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#55992200,endColorstr=#55992200); 
       zoom: 1;
}

十六进制值有8位而不是6.最后两位是alpha值。调整味道。

Answer 3

使用RGBA代码，它是一个css3属性和像ie7这样的旧浏览器，ie8不支持它

R= red
G= green
B= blue
A= alpha

div {
   background: rgba(200, 54, 54, 0.5); 
}

Answer 4

您好我提到的属性可以增加和减少父容器背景的不透明度，这不会影响子容器。很简单，看看css基本上你必须在背景和背景中使用rgb颜色。不透明度的alpha。

CSS background:rgba(0,0,0,0.1);

或观看演示： - http://jsfiddle.net/8LFLd/102/

Answer 5

通过几十个问题说了数百次：

.transparent {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.7);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#70000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#70000000, endColorstr=#99000000)";
}

这是跨浏览器的解决方案。

具有70％不透明度的Div包含具有100％不透明度的图像

5 个答案: