创建透明的图像
自定义透明效果的属性是opacity(中文意思:不透明)
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。
而IE8及更早的版本中用滤镜:
filter:alpha(opacity=x) x取值从0到100。值越小越透明。
图像hover效果
将鼠标放在图片上时,可以显示清晰的图片。
img
{
opacity:0.4;
filter:alpha(opacity=40)
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}
创建透明框中的文本(即具有透明的文本)
<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
width:400px;
height:266px;
margin:15px;
background:url no-repeat;
border:1px solid black;
}
div.transbox
{
width:338px;
height:204px;
margin:30px;
padding:1px;
background:white;
border:1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
color:black;
font:bold 13px verdana,geneva,sana-serif;
line-height:1.5;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
</P>
</div>
</div>
</body>
</html>