如何使子 div 不应该从父 div 继承不透明度？ [复制]答案

【问题标题】：how to make a child div should not inherit opacity from parent div? [duplicate]如何使子 div 不应该从父 div 继承不透明度？ [复制]
【发布时间】：2013-08-06 03:18:31
【问题描述】：

大家好，我创建了一个父 div .ima，其中一个名为 .txt 的 div 当我为 .ima 提供不透明度时，不透明度将自动应用于 .txt，这是显而易见的。但我不希望它是这样的。

只有 .ima 的不透明度应为 0.5，.txt 中的文本应 100% 可见。

有没有办法做到这一点？

这里是fiddle

我尝试在.txt 中将不透明度设置为 1，但它不起作用。我可能以我不知道的错误方式执行此操作。有什么帮助吗？

在这里我提到与可能重复的问题不同

他们已经给出了使用的建议 rgba 但是在这里我不想使用它因为如果我使用rgba 那么这将变成黑色或我们将提到的其他颜色.

我想在这里使用背景图片。

这是我提出的一个示例。

不可能的事情。

我也不想使用 .png 图像（半透明）。图像可能会发生变化，这就是原因。

感谢在这里给出答案的人。

【问题讨论】：

让孩子成为父母的兄弟姐妹？
尝试使用>选择器。
你不能这样做，不透明度是继承的。但是，您可以为父级使用 RGBA 颜色或半透明图像。
我使用的是 BG 图像，所以如果我给 RGBA，颜色会出现。我想用图像来做。@MightyPork
Raj，检查漂流提供的链接。

标签： css

【解决方案1】：

使用 Photoshop 创建一个透明度为 60% 的 png 图像（1px/1px）并调用您的父 div，即

.ima{
  background:url(imagename.png) repeat 0 0;
}

【讨论】：

【解决方案2】：

最简单的方法是假设你只希望.ima的背景是透明的，在这种情况下你应该删除opacity并建立一个值为rgba(X%,X%,X%, .5)的background-colour，在这种情况下@ 987654326@ 没有继承任何东西，你可以继续。

<div class="ima">
    <div class="txt">
        ...
    </div>
</div>

透明背景的CSS：

.ima {
    /* rgba is Red, Green, Blue, Alpha:
     * put in your colour as RGB then add opacity at the end */
    background-color: rgba(255, 0, 0, .5);
}

但是，如果您希望.ima 的某些子节点继承透明度（例如文本和除.txt 之外的元素），那么最简单的方法是创建与.ima 的尺寸相匹配的直接后代并应用opacity 规则：

<div class="ima">
    <div class="txt">
        ...
    </div>
    <div class="ima__transparency">
        ...
    </div>
</div>

CSS：

.ima {
    position: relative;
}

.ima__transparency {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .5;
}

.txt {
    position: relative;
    z-index: 1;
}

Example with background image.

【讨论】：

谢谢，我想使用背景图片而不是颜色
@raj 编辑了答案，以便更明确地说明您如何实现这一目标。
谢谢，我想让 BG 图像单独透明，除了我不希望任何孩子透明，我尝试了 Selectors Like .ima .txt{values} 但没有效果
@raj 如果您希望背景图像是透明的，您需要将透明度应用于.ima 内的额外元素：使用第二种方案（我写的第一个方案）并添加背景图片发送至.ima__transparency。
@raj 我用一个例子和一个额外的规则更新了我的答案，它阻止背景出现在你的内容之上。

【解决方案3】：

你不能不继承不透明度，你的选择是：

调整您的标记，使 .txt 不是 .ima 的子级，然后使用绝对定位
不要使用不透明度，让.txt 覆盖与.ima 相同的区域，并为.txt 提供半透明背景

如果您的目标受众支持gradients 和multiple backgrounds，you can layer an obscuring gradient over the image：

background: linear-gradient( rgba(255,255,255,0.5),rgba(255,255,255,0.5)),
            url('http://www.bing.com/az/hprichbg/rb/NewportOR_ROW5865752464_1366x768.jpg');

使用这种方法，您实际上只需要one div，如果它只是您想要显示的文本和图像。

【讨论】：

+1，很好的解决方案！比渐变更好的是solid color image，但它们似乎比渐变更受支持:-(

【解决方案4】：

很遗憾，您不能使用不透明度，因为它是设计继承的。

但是，如果您只想使用 rgba 颜色语法和对不支持该语法的旧版本 ie 的回退来使父 div 的背景颜色半透明，则可以。

例如创建一个不透明度为 50% 的白色背景。

.parent{
    background: rgba(255, 255, 255, 0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF);   /* IE6 & 7 */
    zoom: 1;
}

/* IE9 hack to remove filter */
.parent:not(dummy) {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}

过滤器中的前两个十六进制值表示背景的不透明度。有一个很好的解释和 rgba 到十六进制转换器here。

注意事项。使用这种技术揭示了 IE 中的一个错误，如果将超链接放置在它们上方，例如如果用于生成模型背景，超链接将通过容器的背景暴露出来。

【讨论】：

【解决方案5】：

你可以使用:after/:before

HTML
<div>asdsadasd</div>
CSS

div{position:relative;} 
div:after{
content:''; 
position:absolute; 
top:0; 
left:0; 
width: 100%; 
height: 100%; 
background: #000; 
opacity:0.3; 
z-index: -1;}

【讨论】：

【解决方案6】：

问题是，不透明度属性适用于整个块。这意味着如果您将 1 不透明度应用于任何子元素，它将对其父元素具有最大不透明度。

我建议您使用半透明的 PNG 背景并添加一个修复程序，以便旧版本的 Internet Explorer 处理不透明度：

.ima {
   width:auto;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='url_to_transparent_image.png');
}

.ima[class] {
   background-image:url('url_to_transparent_image.png');
}

.txt {
   color:white;
}

也就是说，只有当您真的需要完全不透明的文本时。您还可以将父级的不透明度设置得更高一点，这样您的文本就不会太透明，并避免使用“脏”的 CSS 技巧。

【讨论】：