CSS 图像透明/不透明
使用CSS很容易创建透明的图像。
注意：CSS Opacity属性是W3C的CSS3建议的一部分。
实例1 - 创建一个透明图像
CSS3中属性的透明度是 opacity.
首先，我们将向您展示如何用CSS创建一个透明图像。
正常的图像
看看下面的CSS：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}实例2 - 图像的透明度 - 悬停效果
将鼠标移到图像上：
CSS样式：
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 */
}实例3 - 透明的盒子中的文字
这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
源代码如下：
<html>
<head>
<style>
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;
? opacity:0.6;
? filter:alpha(opacity=60);?/* For IE8 and earlier */
? }
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.
</p>
</div>
</div>
</body>
</html>