blocks|key|4237555|text|使用rgba()或透明的PNG作为背景要容易得多。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4237556|rgba(0,+0,+0,+.1);
rgba(0,+0,+0);+//fallback|code-block|syntax|javascript|4237557|entityMap^0|2|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

It's much easier to use <code>rgba()</code> or a transparent PNG for the background.

<pre><code>rgba(0, 0, 0, .1);
rgba(0, 0, 0); //fallback
</code></pre>

blocks|key|455970|text|当然，这种不透明性适用于子元素，因为您可以使用well.What来分隔标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|455971|<div+id='Div-With-Opacity-set'>
</div>
<div+id='Child-Elements-for-the-above-div'>
</div>|code-block|syntax|javascript|455972|仔细对齐您的标记，使其与您所需的标记相似。|455973|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Ofcourse the opacity applies to the child elements as well.What you can do is to segragate your markup.

<pre><code>&lt;div id='Div-With-Opacity-set'&gt;
&lt;/div&gt;
&lt;div id='Child-Elements-for-the-above-div'&gt;
&lt;/div&gt;
</code></pre>

Align your markup carefully such that the markup resembles what you want.

blocks|key|2772204|text|您可以使用rgba()属性来执行以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2772205|像这样写：|2772206|#fade+div
{
background-color:+rgba(0,0,0,0.1);
width:750px;
height:150px;
background-color:#FFFFFF;
}|code-block|syntax|javascript|2772207|对于IE，您可以使用IE+filter|2772208|background:+transparent;-ms-filter:+"progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)";+/*+IE8+*/++++filter:+progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000);+++/*+IE6+&+7+*/++++++zoom:+1;|2772209|您可以从此处的http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/生成筛选器|2772210|entityMap|0|LINK|mutability|MUTABLE|url|http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/^0|5|6|0|0|0|A|9|0|0|7|20|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

You can use <code>rgba()</code> property for this:

write like this:

<pre><code>#fade div
{
background-color: rgba(0,0,0,0.1);
width:750px;
height:150px;
background-color:#FFFFFF;
}
</code></pre>

For IE you can use <code>IE filter</code> 

<pre><code>background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 &amp; 7 */ zoom: 1;
</code></pre>

You can generate your filter from here <a href="http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/" rel="nofollow">http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/</a>

blocks|key|4237633|text|那你为什么不重置不透明度呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4237634|#text+in+fade+div
{
++++font-weight:bold;
++++color:#8A2BE2;
++++opacity:1;
++++filter:alpha(opacity=100);+/*+For+IE8+and+earlier+*/
}|code-block|syntax|javascript|4237635|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Why don't you reset the opacity then?

<pre><code>#text in fade div
{
 font-weight:bold;
 color:#8A2BE2;
 opacity:1;
 filter:alpha(opacity=100); /* For IE8 and earlier */
}
</code></pre>

blocks|key|2772237|text|只需使用1px的半透明gif，然后重复x和y。据我所知，这是设置半透明背景的最简单的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2772238|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Just use 1px semi transparent gif and repeat it by x and y. As far as I know it is the most easy way to set semi transparent background.

blocks|key|456060|text|在没有CSS3的情况下，最好的办法可能是创建一个div，并在其上放置另一个div，但不要嵌套在其中。不透明度过滤到设置了不透明度的元素内的所有元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|456061|如果你把一个div直接放在右边，然后给它一个-750px；的边距，你可以给它一个不透明度1，但它后面的div的不透明度可能是0.1，这样就可以很好地工作了。|456062|使用CSS3，您可以这样做：|456063|#fade+
{
width:750px;
height:150px;
background-color:+rgba(255,255,255,0.1);
}|code-block|syntax|javascript|456064|仅背景就是0.1不透明度。文本仍然是1。|456065|我个人最常做的事情是创建一个带有我想要的透明背景的小.png，然后将该.png设置为某个元素的背景。在photoshop中，我可以将白色背景的不透明度设置为0.1，然后保存一个50X50的正方形，然后我就得到了近乎完美的透明度(没有IE6)。|456066|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Your best bet without CSS3 is probably to create a div and put another div positioned on top of it, but not nested inside of it. Opacity filters down to ALL elements inside of the element with the opacity set. 

If you put a div immediately to the right, and then gave it a margin of -750px;, you could give it an opacity of 1, but the div behind it could have an opacity of 0.1, and this would work fine. 

With CSS3 you could do this:

<pre><code>#fade 
{
width:750px;
height:150px;
background-color: rgba(255,255,255,0.1);
}
</code></pre>

and just the background would be 0.1 opacity. The text would still be 1.

What I personally do most often though, is I create a small .png with the transparent background that I want, and then I set that .png as the background of an element. In photoshop I could set the opacity of the white background to 0.1, then save a 50X50 square, and then I've got nearly perfect transparency (no IE6).

blocks|key|4237693|text|你需要像http://jsfiddle.net/PWM5f/这样的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4237694|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/PWM5f/^0|4|Q|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

something like <a href="http://jsfiddle.net/PWM5f/" rel="nofollow">http://jsfiddle.net/PWM5f/</a> you need

Hi i am using CSS Opacity Property for a div tag and it works well but the problem is when I write some text or paste images on that div tag they also become fade. I just need div back color to be fade and not the div content. My code is ... 

<pre><code>#fade div
{
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
width:750px;
height:150px;
background-color:#FFFFFF;
}

#text in fade div
{
font-weight:bold;
color:#8A2BE2;
}
</code></pre>

Thankyou !!!

CSS Opacity Property

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

您好，我正在为div标签使用CSS不透明属性，它工作得很好，但问题是当我在div标签上写一些文本或粘贴图像时，它们也会变得淡出。我只需要div背景颜色是淡入淡出，而不是div内容。我的代码是...#fade div{opacity:0.1;filter:alpha(opacity=10); /* For IE8 and...

问CSS不透明度属性
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS不透明度属性EN