html - 如何为Text设置不透明度？ - Thinbug

如何为Text设置不透明度？

时间：2009-08-18 14:51:26

标签： html css

我的div标签包含文字：

<div id="XXX" class="xxx">
    fffsdssfdf
</div>

这样的CSS：

.xxx{
opacity :50;
}

但文字不透明。

5 个答案:

答案 0 :(得分：2)

不透明度是一个CSS 3属性。它表示为0 - 1.0。所以50％的不透明度是这样的：

.xxx {
    opacity: 0.5;
}

许多浏览器（IE 6和IE 7）也不支持它，但有一些解决方法。例如：http://webdesign.about.com/od/css3/a/aa121306.htm

答案 1 :(得分：2)

对于跨浏览器不透明度，您需要：

{ 
    -moz-opacity:.50; 
    filter:alpha(opacity=50); 
    opacity:.50; 
}

答案 2 :(得分：2)

跨浏览器解决方案：

^{由http://davidwalsh.name/css-opacity提供}

.show-50 { 
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
  opacity:.50; 
}

包含IE8

^{由Laith Bade提供}

.show-50 { 
  -moz-opacity:.50; 
  -ms-filter:"alpha(opacity=50)"; 
  filter:alpha(opacity=50); 
  opacity:.50; 
}

答案 3 :(得分：1)

这取决于您的浏览器。 Opacity适用于Firefox和Safari。（使用“opacity：”而不是“opacity：”）。您还必须修复不透明度值，因为此值必须定义在0和1之间。

对于IE，请尝试：

filter: alpha(opacity=85)

答案 4 :(得分：1)

支持RGBA的浏览器：

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
h1 {
  color: rgba(255, 0, 0, .5/* opacity */);
}
</style>
</head>
<body>

<h1>RED</h1>

</body>
</html>