图像透明度大法（opacity）

定义和用法

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

语法

opacity: value|inherit;

实例一：创建透明图像

<!DOCTYPE html>
<html>
<head>
<style>
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 */
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<img src="http://pic.58pic.com/58pic/15/36/00/73b58PICgvY_1024.jpg" alt="Peach Blossom" />
<p><b>注释：</b>在 IE 中，必须添加 <!DOCTYPE>，这样才能将 :hover 选择器用于除了 <a> 之外的其它元素。</p>
</body>
</html>

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

呈现方式

<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
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.</p>
</div>
</div>
</body>
</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j59228.shtml