blocks|key|225892|text|如果您在:after伪类中定义您的background-image，可能会更好。像这样写：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|225893|.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%2Bimage');
++++width:300px;
++++height:300px;
++++position:absolute;
++++top:0;
++++left:0;
++++opacity:0.5;
}
.child{
++++background:yellow;
++++position:relative;
++++z-index:1;
}|code-block|syntax|javascript|225894|检查此fiddle|225895|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/hzSG8/^0|4|6|H|G|0|0|3|6|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|10|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|11|8|@]|E|@$9|12|A|13|1|14]]|F|$]]|$1|N|3|-4|5|6|7|15|8|@]|E|@]|F|$]]]|O|$P|$5|Q|R|S|F|$T|U]]]]

May be it's good if you define your background-image in the <code>:after</code> pseudo class. Write like this:

<pre><code>.parent{
 width:300px;
 height:300px;
 position:relative;
 border:1px solid red;
}
.parent:after{
 content:'';
 background:url('http://www.dummyimage.com/300x300/000/fff&amp;text=parent+image');
 width:300px;
 height:300px;
 position:absolute;
 top:0;
 left:0;
 opacity:0.5;
}
.child{
 background:yellow;
 position:relative;
 z-index:1;
}
</code></pre>

Check this <a href="http://jsfiddle.net/hzSG8/">fiddle</a>

blocks|key|2880068|text|我知道这很古老，但以防万一它会对别人有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2880069|<div+style="background-color:+rgba(255,+0,+0,+0.5)">child</div>+|code-block|syntax|javascript|2880070|其中rgba是:红色、绿色、蓝色，a是透明的。|offset|length|style|CODE|2880071|entityMap^0|0|0|2|4|H|1|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

I know this is old, but just in case it will help someone else. 

<pre><code>&lt;div style="background-color: rgba(255, 0, 0, 0.5)"&gt;child&lt;/div&gt; 
</code></pre>

Where <code>rgba</code> is: red, green, blue, and <code>a</code> is for transparency.

blocks|key|3094032|text|你可以用伪元素来实现：(demo+on+dabblet.com)|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3094033|📷|atomic|3094034|​|3094035|你的标记：|3094036|<div+class="parent">
++++<div+class="child">+Hello+I+am+child+</div>
</div>|code-block|syntax|javascript|3094037|css:|3094038|.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;
}|3094039|entityMap|0|LINK|mutability|MUTABLE|url|http://dabblet.com/gist/2867543|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/efa572d944f5750b1388ea667d70bd77.png|imageAlt^0|7|P|C|J|0|0|0|1|0|1|1|0|0|1|0|0|5|0|0|23|0|0|4|0|0|8D|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|F|3|G|5|H|7|1F|8|@$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|I|3|J|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|M|3|N|5|O|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$P|Q]]|$1|R|3|S|5|6|7|1U|8|@$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|T|3|U|5|O|7|1X|8|@$9|1Y|A|1Z|B|C]]|D|@]|E|$P|Q]]|$1|V|3|-4|5|6|7|20|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]|13|$5|14|Z|15|E|$16|17|18|-4]]]]

You can do it with pseudo-elements: (<a href="http://dabblet.com/gist/2867543" rel="noreferrer">demo on dabblet.com</a>)
<img src="https://i.stack.imgur.com/9luI6.png" alt="enter image description here">

your markup:

<pre><code>&lt;div class="parent"&gt;
 &lt;div class="child"&gt; Hello I am child &lt;/div&gt;
&lt;/div&gt;
</code></pre>

css:

<pre><code>.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;
}
</code></pre>

blocks|key|225945|text|正如汤姆提到的，background-color:+rgba(229,229,229,+0.85)可以做到这一点。把它放在父元素的样式上，子元素就不会受到影响。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|225946|entityMap^0|8|15|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

As mentioned by Tom, <code>background-color: rgba(229,229,229, 0.85)</code> can do the trick.
Place that on the style of the parent element and child wont be affected.

blocks|key|2879874|text|你不能。现在的Css根本不允许这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2879875|逻辑渲染模型是这样的：|2879876|2879877|如果对象是容器元素，则效果就像是使用掩码将容器元素的内容与当前背景混合在一起，其中掩码的每个像素的值是。|blockquote|2879878|2879879|2879880|参考：css+transparency|offset|length|2879881|解决方案是使用不同的元素组合，通常使用固定或计算的位置作为今天定义的子元素:它可能在逻辑上和视觉上对用户显示为一个子元素，但在您的代码中该元素不需要真正是一个子元素。|2879882|使用css的解决方案：fiddle|2879883|.parent+{
++++width:500px;
++++height:200px;++++
++++background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%25C3%25AAte-011.jpg');
++++opacity:+0.2;
}
.child+{
++++position:+fixed;
++++top:0;
}|code-block|syntax|javascript|2879884|使用javascript的另一种解决方案：fiddle|2879885|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-color/#transparency|1|http://jsfiddle.net/dystroy/RVppt/|2|http://jsfiddle.net/dystroy/WnQJ9/^0|0|0|0|0|0|0|3|G|0|0|0|B|6|1|0|0|L|6|2|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1D|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1G|8|@]|9|@$L|1H|M|1I|1|1J]]|A|$]]|$1|N|3|O|5|6|7|1K|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1L|8|@]|9|@$L|1M|M|1N|1|1O]]|A|$]]|$1|R|3|S|5|T|7|1P|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1Q|8|@]|9|@$L|1R|M|1S|1|1T]]|A|$]]|$1|Y|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]|18|$5|11|12|13|A|$14|19]]]]

You can't. Css today simply doesn't allow that.

The logical rendering model is this one :

<blockquote>
 If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .
</blockquote>

Reference : <a href="http://www.w3.org/TR/css3-color/#transparency" rel="nofollow">css transparency</a>

The solution is to use a different element composition, usually using fixed or computed positions for what is today defined as a child : it may appear logically and visualy for the user as a child but the element doesn't need to be really a child in your code.

A solution using css : <a href="http://jsfiddle.net/dystroy/RVppt/" rel="nofollow">fiddle</a>

<pre><code>.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;
}
</code></pre>

Another solution with javascript : <a href="http://jsfiddle.net/dystroy/WnQJ9/" rel="nofollow">fiddle</a>

blocks|key|3094166|text|我也有同样的问题，我通过设置透明的png图片作为父标签的背景来修复。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3094167|This+is+the+1px+x+1px+PNG+Image+that+I+have+created+with+60%25+Opacity+of+black+background！|offset|length|3094168|entityMap|0|LINK|mutability|MUTABLE|url|http://i.stack.imgur.com/2eS18.png^0|0|0|2G|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

I had the same problem and I fixed by setting transparent png image as background for the parent tag.

<a href="http://i.stack.imgur.com/2eS18.png" rel="nofollow">This is the 1px x 1px PNG Image that I have created with 60% Opacity of black background</a> !

blocks|key|3093988|text|您不能这样做，除非您将子对象从父对象中取出，并通过定位将其放置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3093989|我知道的唯一有效的方法是使用一个半透明的图像(透明的.png)作为父母的背景。唯一的缺点是你不能通过CSS控制不透明度，除了它可以工作！|3093990|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

You can't do that, unless you take the child out of the parent and place it via positioning.

The only way I know and it actually works, is to use a translucid image (.png with transparency) for the parent's background. The only disavantage is that you can't control the opacity via CSS, other than that it works!

Hey i am searching in google but i can't fine any perfect answer

I want to Opacity in parent DIV but not Child DIV

Example 

HTML

<pre><code>&lt;div class="parent"&gt;
&lt;div class="child"&gt;
Hello I am child 
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

Css

<pre><code>.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}
</code></pre>

Note: -- I want to background-image in <code>Parent Div</code> not Color

How to set opacity in parent div and not affect in child div?

嘿，我在谷歌上搜索，但我找不到任何完美的答案我想要父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;}注意

问如何在父div中设置不透明度而在子div中不受影响？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在父div中设置不透明度而在子div中不受影响？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在父div中设置不透明度而在子div中不受影响？
EN