html图形透明度,图像透明度大法（opacity）

定义和用法

opacity 属性设置元素的不透明级别。

语法

opacity: value|inherit;

实例一：创建透明图像

img

{

opacity:0.4;

filter:alpha(opacity=40); /* For IE8 and earlier */

}

img:hover

{

opacity:1.0;

filter:alpha(opacity=100); /* For IE8 and earlier */

}

图像透明度

注释：在 IE 中，必须添加 ，这样才能将 :hover 选择器用于除了 之外的其它元素。

实例二：半透明框中加文本

呈现方式

.background

{

width: 400px;

height: 266px;

background: url(http://pic.58pic.com/58pic/15/36/00/73b58PICgvY_1024.jpg) no-repeat ;

border: 1px solid black;

}

.transbox

{

width: 338px;

height: 204px;

margin:30px;

background-color: #ffffff;

border: 1px solid black;

/* for IE */

filter:alpha(opacity=60);

/* CSS3 standard */

opacity:0.6;

}

.transbox p

{

margin: 30px 40px;

}

This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.