CSS 图像透明/不透明
使用CSS很容易创建透明的图像。
注意：CSS Opacity属性是W3C的CSS3建议的一部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
}
.demo{
padding: 25px;
background-color:#000000;
opacity: 0.2;
}
.demo p{
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明，文字也透明</p>
</div>
</html>css3的rgba
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
}
.demo{
padding: 25px;
background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
}
.demo p{
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明，文字也透明</p>
</div>
</html>CSS让图片由模糊变清淅，其实主要是使用了CSS Filter滤镜来实现鼠标悬停时改变图片的透明度来实现。默认状态下，图片的透明度是70，也就是有些透明，让图片看上去有点模糊，当鼠标移上的时候，图片的透明度变为0，也就是不透明了，图片看上去就清淅了，CSS代码如下：
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.highlightit img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.highlightit:hover img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
<body>
<a href="#" class="highlightit"><img border="0" src="http://pic2016.5442.com:82/2016/0830/6/11.jpg%21960.jpg" width="180px" height="150px"></a>
<a href="#" class="highlightit"><img border="0" src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g3/M0A/0F/09/Cg-4WFRplp2IYqiNACQ0TQPPChQAARbPQEM84oAJDRl464.jpg" width="180px" height="150px"></a>
</body>
</html>
下一节