CSS3中属性的透明度是 opacity.
首先，我们将向您展示如何用CSS创建一个透明图像。
看看下面的CSS：
将鼠标移到图像上：
第一个CSS块是和例1中的代码类似。此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。
此CSS是：opacity=1.
IE8和更早版本使用： filter:alpha(opacity=100).
当鼠标指针远离图像时，图像将重新具有透明度。
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.
源代码如下：
| <html> |
| <head> |
| <style> |
| .web3_background |
| { |
| width:500px; |
| height:250px; |
| background:url(klematis.jpg) repeat; |
| border:2px solid black; |
| } |
| .web3_transbox |
| { |
| width:400px; |
| height:180px; |
| margin:30px 50px; |
| background-color:#ffffff; |
| border:1px solid black; |
| opacity:0.6; |
| filter:alpha(opacity=60); /* For IE8 and earlier */ |
| } |
| .web3_transbox p |
| { |
| margin:30px 40px; |
| font-weight:bold; |
| color:#000000; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="web3_background"> |
| <div class="web3_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> |
