CSS不透明度属性

Question

你好，我正在使用CSS的不透明度属性来设置一个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;
}

谢谢您！

- h_a86

---

你能使用CSS3吗？还是需要尽可能地兼容性广泛？ - BumbleShrimp

如果您将文本/图像放在该div中，则该div将成为其父级，并包含父级的属性，为了更好地理解问题，请创建[jsfiddle]（http://jsfiddle.net）。 - Punit

相关：http://css-tricks.com/rgba-browser-support/ - 2rs2ts

Answer 1

使用rgba()或透明的PNG背景会更容易。

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

- Russell Dias

---

这是一个很好的解决方案。查看此链接以获取更多信息：http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ - Grrbrr404

Answer 2

您可以使用 rgba() 属性来实现该效果：

写成这样：

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

对于IE浏览器，您可以使用IE滤镜。

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/。

- sandeep

---

是的，但应该像这样 background-color: rgba(0,0,0,0.1);。 - lalibi

筛选器不起作用，这样 #header { width:750px; height:150px; background-color:#333333; background-color: rgba(0,0,0,0.1);<!--[if IE]> 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; <![endif]--> } - h_a86

可能是background-color:#333333;的问题。你可能需要把它移除。 - sandeep

Answer 3

只需使用1像素半透明gif并在x和y轴上重复即可。据我所知，这是设置半透明背景最简单的方法。

- bbrodriges

Answer 4

你需要像http://jsfiddle.net/PWM5f/这样的东西

- Punit

Answer 5

当然，不透明度也会应用于子元素。你可以做的是将你的标记分离。

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

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

- Ashwin Krishnamurthy

Answer 6

为什么不重置透明度呢？

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

- lalibi

---

这个不起作用。opacity本来就不是一个继承属性。 - 2rs2ts

Answer 7

如果没有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）。

- BumbleShrimp