CSS Image Opacity / Transparency
注：这是没有一个CSS标准。然而，工程所有的现代浏览器，是一种部分的W3C的CSS 3的建议。
范例1 -创建一个透明图像
首先，我们将向您展示如何创建一个透明图像的CSS 。
经常图片：
<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" />
例如2 -图像透明度-鼠标放置的影响
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
我们看到，第一行的源代码是类似的源代码范例1 。此外，我们还增加了一个onmouseover属性和onmouseout属性。
onmouseover属性的定义会发生什么事时，鼠标指针移动的形象。在这种情况下，我们要的形象不能是透明的当我们移动鼠标指针超过它。 的语法这在Firefox是： this.style.opacity = 1和IE中的语法是： this.filters.alpha.opacity = 100 。 当鼠标指针远离的形象，我们希望的形象是透明的一次。这样做是在onmouseout属性。
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</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.
