如何在父 div 中设置不透明度而不影响子 div？ [复制]

Posted 2023-02-19

【中文标题】如何在父 div 中设置不透明度而不影响子 div？ [复制]

【英文标题】：How to set opacity in parent div and not affect in child div? [duplicate]

【发布时间】：2012-06-08 09:25:37

【问题描述】：

嘿，我在谷歌上搜索，但我找不到任何完美的答案

我想在父 DIV 中设置不透明度而不是子 DIV

例子

HTML

<div class="parent">
<div class="child">
Hello I am child 
</div>
</div>

CSS

.parent
background:url('../images/madu.jpg') no-repeat 0 0;

.child
Color:black;

注意：--我想background-image在Parent Div而不是颜色

【问题讨论】：

嘿@DavidThomas 你怎么能说这个问题是重复的，如果你有任何与这个问题相关的答案，但没有使用 Position 并习惯于纯 CSS 中父 div 中的背景图像...... ......

预编辑它似乎是；我在手机上阅读了这个问题，然后为了找到重复的内容，我切换到了桌面。我没有在两次之间重新阅读您的问题。不过，我的近距离投票会逐渐消失，所以不要担心。

【参考方案1】：

我知道这是旧的，但以防万一它会帮助别人。

<div style="background-color: rgba(255, 0, 0, 0.5)">child</div> 

其中rgba 是：红色、绿色、蓝色，a 表示透明度。

【讨论】：

...aa并且它不会影响子 div 中的其他背景颜色（只是一个快速说明）

添加硬编码的内联样式是错误的，请勿分享。

【参考方案2】：

如果您在 :after 伪类中定义 background-image 可能会很好。像这样写：

.parent
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;

.parent:after
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;

.child
    background:yellow;
    position:relative;
    z-index:1;

查看fiddle

【讨论】：

我的回答和你的很相似，但我无法想象我的问题是什么

@sandeep 感谢您的确切答案，我们对这个错误完全感到困惑......谢谢哥们......

@VladimirStarkov 当我给出答案时，我没有看到你的答案:)

使用background-color: rgba(255,255,255,0.3); 代替不透明度。它不会继承。

@AshwinP 谢谢你的解决方案似乎是准确的。

【参考方案3】：

你可以做到使用伪元素：(demo on dabblet.com)

您的标记：

<div class="parent">
    <div class="child"> Hello I am child </div>
</div>

css：

.parent
    position: relative;


.parent:before 
    z-index: -1;
    content: '';
    position: absolute;

    opacity: 0.2;
    width: 400px;
    height: 200px;
    background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0; 


.child
    Color:black;

【讨论】：

嘿@Vlamimir starkov 我不使用位置......

@RohitAzad 为什么这么重要？

+1 你的回答你也接近我的要求实际上你没有在你的父母中定义宽度高度所以这就是为什么我对你的回答有点困惑谢谢...... .

@RohitAzad 我只为伪元素定义它以获得更大的灵活性

【参考方案4】：

正如 Tom 所说，background-color: rgba(229,229,229, 0.85) 可以解决问题。 将其放在父元素的样式上，子元素不会受到影响。

【参考方案5】：

你不能。今天的 CSS 根本不允许这样做。

逻辑渲染模型是这个：

如果对象是一个容器元素，那么效果就好像容器元素的内容使用掩码与当前背景混合，其中掩码的每个像素的值为 。

参考：css transparency

解决方案是使用不同的元素组合，通常对今天定义为子元素的元素使用固定或计算的位置：对于作为子元素的用户来说，它可能在逻辑上和视觉上看起来都一样，但元素不需要真的您的代码中有一个孩子。

使用 css 的解决方案：fiddle

.parent 
    width:500px;
    height:200px;    
    background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg');
    opacity: 0.2;

.child 
    position: fixed;
    top:0;

另一个使用 javascript 的解决方案：fiddle

【讨论】：

谢谢，但这只是与背景颜色相关而不是背景图像......

你能在 jsfiddle.net 上给我一些例子吗

嗨，谢谢你做一个 jsfiddle，但我没有使用位置.......

你必须定义“孩子”的位置（那不是真正的孩子）。使用javascript或css。可能有很多解决方案，每一种都适用于特定的网络组合。

我对此表示赞同，因为我已经多次返回这个问题，并且每次我都放弃排名最高的解决方案。当然，它们可以工作，但每次我最终都使用 1px PNG 背景。我现在已经做了5次了。所以，是的，正如这个答案所说，看起来 CSS 在这方面不太擅长。希望下次我考虑这个时能找到这个评论。

【参考方案6】：

我遇到了同样的问题，我通过将透明 png 图像设置为父标签的背景来解决。

This is the 1px x 1px PNG Image that I have created with 60% Opacity of black background!

【参考方案7】：

你不能这样做，除非你把孩子从父母身上拿出来并通过定位放置。

我知道并且实际可行的唯一方法是使用半透明图像（具有透明度的.png）作为父母的背景。唯一的缺点是你不能通过 CSS 控制不透明度，除了它可以工作！