如何使用 CSS 使背景 DIV 仅透明答案

【问题标题】：How to make the background DIV only transparent using CSS如何使用 CSS 使背景 DIV 仅透明
【发布时间】：2017-08-12 06:50:35
【问题描述】：

我正在使用 CSS 属性：

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

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

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

【问题讨论】：

简短的回答是你不能。将另一个 div 放在透明 div 之外。
相关问题：stackoverflow.com/questions/806000/…

标签： css html

【解决方案1】：

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

外部 DIV 的 opacity 属性不能被内部 DIV 撤消。如果要实现透明，请使用rgba 或hsla：

外层：

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

内部 div：

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

编辑
因为您已将filter:alpha(opacity=90) 添加到您的问题中，所以我假设您还想要一个适用于（旧版本）IE 的有效解决方案。这应该工作（-ms- IE 的最新版本前缀）：

/*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 sn-p 来将相对不透明度值转换为绝对 alpha-hex 值：

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);

【讨论】：

【解决方案2】：

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

制作一个 1px x 1px 的小透明图片并将其保存为 .png 文件。

在 DIV 的 CSS 中，使用以下代码：

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

记得将文件路径更改为透明图像。

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

【讨论】：

正要放弃实现效果，因为代码变得过于繁琐，无法保持简单易懂。然后我看到了这个。谢谢。

【解决方案3】：

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

【讨论】：

我猜这个操作可能在谈论半透明。

【解决方案4】：

这是不可能的，不透明度是由子节点继承的，你无法避免这种情况。要仅使父级透明，您必须使用元素的定位（绝对）及其 z-index

【讨论】：

【解决方案5】：

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

意思是：

<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 不透明度

【讨论】：

【解决方案6】：

.modalBackground
    {

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

【讨论】：

如果 z-index 不需要，则不要使用 z-index 属性.. 只需使用其余代码
那么唯一的影响是值与询问者的情况略有不同，但询问者希望内部元素看起来不透明。这不会实现。
背景图片:url('image/img2.jpg'); background-repeat:repeat-x 使用一些图像作为内部图像并使用这个
那是什么？如果是解决提问者问题的建议，那么它应该在答案本身中。

【解决方案7】：

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

使用一些图像作为内部图像并使用它。

【讨论】：

【解决方案8】：

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

【讨论】：

您的回答信息量有点少...我建议您使用tour，阅读How to Answer，然后阅读edit您的帖子:)
虽然答案总是很受欢迎，但这个问题是在 5 年前前提出的，并且已经有了一个公认的解决方案。请尽量避免通过提供答案来将问题“颠倒”到顶部，除非该问题尚未标记为已解决，或者您找到了针对该问题的新的和改进的解决方案。还记得提供一些context surrounding your code 来帮助解释它。查看writing great answers 上的文档，了解有关如何使您的答案发挥作用的一些提示：)