使用CSS创建透明图像很容易。
CSS的opacity属性是CSS3建议的一部分。
示例1 - 创建一个透明图像
透明度的CSS3属性是opacity 。
首先，我们将告诉你如何使用CSS创建一个透明图像。
常规图像：
透明相同的图像：
请看下面的CSS：
该opacity属性可值0.0 - 1.0。 数值越低，越透明。
IE8和更早使用filter:alpha(opacity=x) 在x可以从值0 - 100。较低的值使元素更加透明。
示例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 */
}
试一试» 第一个CSS块类似于示例中。此外，我们还增加当用户将鼠标悬停在图片中会发生什么的代码。 在这种情况下，我们希望图像不是透明的，当用户将鼠标悬停在它。 这种情况的CSS是opacity:1;
当鼠标指针从图像移开，图像将是透明的一次。
示例3 - 透明框文本
这是一些文字，被放置在透明框。
源代码如下所示：
例
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
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.</p>
</div>
</div>
</body>
</html>
试一试» 首先，我们创建一个<div>元素(class="background")与背景图像和边框。 然后，我们创建另一个<div> (class="transbox")的第一个内部<div> 该<div class="transbox">有一个背景颜色，边框-股利是透明的。 里面的透明<div>我们增加了一个内部的一些文本<p>元素。