Question

您好我正在使用CSS Opacity属性作为div标签并且它运行良好但问题是当我在该div标签上写一些文本或粘贴图像时它们也会变淡。我只需要div背颜色即可淡化而不是div内容。我的代码是......

#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;
}

谢谢!!!

Answer 1

使用rgba()或透明PNG作为背景要容易得多。

rgba(0, 0, 0, .1);
rgba(0, 0, 0); //fallback

Answer 2

您可以使用rgba()属性：

这样写：

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

对于IE，您可以使用IE filter

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;

您可以从http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

生成过滤器

Answer 3

只需使用1px半透明gif，然后用x和y重复它。据我所知，这是设置半透明背景的最简单方法。

Answer 4

当然，不透明度也适用于子元素。你可以做的是选择你的标记。

<div id='Div-With-Opacity-set'>
</div>
<div id='Child-Elements-for-the-above-div'>
</div>

仔细对齐标记，使标记类似于您想要的标记。

Answer 5

为什么不重置不透明度呢？

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

Answer 6

没有CSS3你最好的选择可能是创建一个div并将另一个div放在它上面，但不要嵌套在它内部。不透明度使用不透明度设置过滤到元素内的所有元素。

如果你把div放在右边，然后给它一个-750px的边距;你可以给它一个不透明度为1，但它背后的div可能有0.1的不透明度，这样可以正常工作。

使用CSS3你可以这样做：

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

只有背景是0.1不透明度。该文本仍为1。

我个人最常做的是，我创建一个带有我想要的透明背景的小.png，然后我将.png设置为元素的背景。在Photoshop中，我可以将白色背景的不透明度设置为0.1，然后保存50X50的正方形，然后我的透明度几乎完美（没有IE6）。

Answer 7

类似http://jsfiddle.net/PWM5f/你需要的东西

CSS不透明属性

7 个答案: