HTML5怎么设置透明色

问题分析：

HTML的标签可以使用CSS的background-color来设置背景颜色以及透明度。

举例如下：

以下示例将分别演示不透明、50%透明度以及20%透明度的三种不同效果。

HTML代码：

123456789

<div id="test-1"> 我是黑色背景，不透明的。</div><div id="test-2"> 我是黑色背景，50%透明度。</div><div id="test-3"> 我是黑色背景，20%透明度。</div>

CSS代码：

123456789101112131415161718

#test-1, #test-2, #test-3{width: 300px height: 200px line-height: 200px text-align: center display: inline-block margin-left: 50px color: #FFF}#test-1{background-color: rgba(0,0,0,1)}#test-2{background-color: rgba(0,0,0,0.5)}#test-3{background-color: rgba(0,0,0,0.2)}

首先，您说的亮度应该是图片透明度。

图片透明度调整很简单，只要在图片的属性中加上{filter:alpha(opacity=50)-moz-opacity:0.5-khtml-opacity: 0.5opacity: 0.5}；

opacity是最重要的，因为它是CSS透明的标准属性，取值范围在0-1之间，目前支持的浏览器有：

Firefox、Chrome、Opera、Safari。（也就是说，除了IE，它支持所有主流浏览器）；

filter:alpha(opacity=50)是专门给IE设定的属性，取值的范围在0-100之间；

-moz-opacity是为了兼容一些老版本的Mozilla浏览器，取值范围在0-1之间；

-khtml-opacity是为了兼容一些老版本的Safari浏览器，取值范围在0-1之间。

图层透明可能有3种可能。

图层没有背景色或背景图片，其本身就是透明的，其中有文字、图片不透明，没有内容的区域可以直接看到下一层。

通过CSS样式表设置

filter:alpha(Opacity=50)    /*IE支持，取值0-100*/

opacity: 0.5    /*HTML5浏览器，取值0-1*/

这种方法包括背景，内容的文字、图片、边框都会变为半透明。

3、做一张PNG图片，PNG图片支持透明和半透明甚至渐变透明。图层以这张图片作为背景。和第一种情况一样，背景是透明或半透明的，但内容是不透明的。

---