如何使背景DIV只使用CSS

我使用CSS attrubutes透明：如何使背景DIV只使用CSS

filter: alpha(opacity=90);  
不透明度：0.9;

使DIV透明，但是当我在这个DIV中添加另一个DIV时，它也使它透明。

我想让外部（背景）DIV只透明。怎么样？

来源

2011-09-27 Adham

简短的回答是不能。将另一个div放在透明div之外。 –

相关问题：http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text –

小提琴：http://jsfiddle.net/uenrX/1/

外DIV的不透明度属性不能由内DIV撤消。如果你想达到透明，使用rgba或hsla：

外格：

background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/

内格：

background-color: #FFF; /* Background white, to override the background propery*/

编辑
因为你将filter:alpha(opacity=90)你的问题，我假设你也想为（旧版本的）IE提供一个工作解决方案。这应该工作（IE浏览器的最新版本-ms-前缀）：

/*Padded for readability, you can write the following at one line:*/ 
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1, 
    startColorStr="#E6FFFFFF", 
    endColorStr="#E6FFFFFF"); 

/*Similarly: */ 
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1, 
    startColorStr="#E6FFFFFF", 
    endColorStr="#E6FFFFFF");

我已经使用了渐变滤镜，开始用相同的start-和end-color，使背景不显示梯度，但平坦的颜色。颜色格式为ARGB十六进制格式。我写了一个JavaScript片段，以相对不透明度值转换为绝对字母的十六进制值：

var opacity = .9; 
var A_ofARGB = Math.round(opacity * 255).toString(16); 
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB; 
else if(!A_ofARGB.length) A_ofARGB = "00"; 
alert(A_ofARGB);

来源

2011-09-27 07:11:06

这是不可能的，不透明度由子节点继承，你不能避免这种情况。为了让父母透明，你必须玩定位（绝对）的元素和Z指数

来源

2011-09-27 07:16:46 daveoncode

我不知道这是否改变。但从我的经验。嵌套元素的最大不透明度等于父亲。

这意味着：

<div id="a"> 
<div id="b"> 
</div></div> 

Div#a has 0.6 opacity 
div#b has 1 opacity

有＃B为#A内，那么它的最大不透明度始终是0.6

如果#B将有0.5的不透明度。在实际上它将是0.6 * 0.5 == 0.3不透明度

来源

2011-09-27 07:19:13 fmsf

我有同样的问题，这是我想出的解决方案，这是更容易！

稍作修改1px x 1px透明图像并保存为.png文件。

在CSS您DIV，使用此代码：

background:transparent url('/images/trans-bg.png') repeat center top;

记住的文件路径更改为透明图像。

我认为这个解决方案适用于所有浏览器，可能除了IE 6，但我还没有测试过。

来源

2012-04-25 21:03:11 2by

.modalBackground 
    { 

     filter: alpha(opacity=80); 
     opacity: 0.8; 
     z-index: 10000; 
    }

来源

2013-08-13 11:29:20

这不会达到预期的效果，而Z指数的滥用使用可能不是好主意 - 更不用说这个用法可能根本没有任何效果。 –

如果z-index不需要，那么不要使用z-index属性..只需使用代码 –

的其余部分，那么唯一的影响是值从asker的情况稍微改变，但提问者希望内部元素看起来不透明。这不会实现。 –

background-image:url('image/img2.jpg'); 
background-repeat:repeat-x;

使用一些图像的内部图像，并使用它。

来源

2013-08-13 12:12:58

只是不包括该div的背景颜色，它将是透明的。

来源

2014-07-10 08:55:52 SAF

我想这个操作可能是在谈论半透明。 –

-1

<div id="divmobile" style="position: fixed; background-color: transparent; 
    z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">

来源

2017-08-09 22:40:54 user2134352

您的回答有点短暂的信息...我建议你参加[旅游]，阅读[回答]，然后[编辑]你的帖子:) –

虽然答案总是赞赏，这个问题被问5 * *年前**，并已有一个可接受的解决方案。请尽量避免将问题顶到问题的顶端，除非问题还没有被标记为已解决，或者您发现了一个新的改进的问题解决方案。还请记住提供一些[**代码围绕您的代码**]（https://meta.stackexchange.com/questions/114762）来帮助解释它。查看关于如何让你的答案数的一些技巧的[**写出很好的答案**]（http://stackoverflow.com/help/how-to-answer）上的文档:) –