1

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

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

谢谢

4

5 回答 5

2

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

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

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

JS 小提琴演示。

我认为支持该opacity属性的相同浏览器都支持它。

于 2012-09-03T10:31:35.123 回答
2

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

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

您可以在此处将#hex 颜色代码转换为 rgb 。

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 值。调整口味。

于 2012-09-03T10:32:01.923 回答
1

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

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

div {
   background: rgba(200, 54, 54, 0.5); 
}
于 2012-09-03T10:34:13.400 回答
0

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

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

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

于 2012-09-03T11:06:42.557 回答
0

正如通过数十个问题所说的数百次：

.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)";
}

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

于 2012-09-03T11:31:16.880 回答