具有 70% 不透明度的 Div 包含具有 100% 不透明度的图像答案

【问题标题】：Div with 70% opacity containing images with 100% opacity具有 70% 不透明度的 Div 包含具有 100% 不透明度的图像
【发布时间】：2012-08-28 02:02:55
【问题描述】：

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

我该如何解决这个问题？我四处寻找，但找不到任何解决方案。

谢谢

【问题讨论】：

标签： css opacity

【解决方案1】：

具有透明度的元素的子元素 (opacity opacity: 1 只会使子元素与其父元素一样透明，但不再如此。

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

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

JS Fiddle demo.

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

【讨论】：

【解决方案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/

对于 IE

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

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

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

【讨论】：

ie6、ie7 和 ie8 不支持rgba。它从 ie9 开始工作。

【解决方案3】：

为此使用 RGBA 代码，它是 css3 属性，旧浏览器如 ie7，ie8 不支持它

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

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

【讨论】：

【解决方案4】：

您好，我提到了一个属性，您可以通过该属性增加和减少父容器背景的不透明度，并且不会影响子容器。这很简单，基本上你必须在背景中使用 rgb 颜色和 alpha 来获得不透明度。

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

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

【讨论】：

【解决方案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)";
}

这是跨浏览器解决方案。

【讨论】：