CSS 圖像透明/不透明
CSS 圖像透明/不透明
使用CSS很容易創(chuàng)建透明的圖像。
注意：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內(nèi)核的瀏覽器(如QQ瀏覽器)下顏色被覆蓋 */
background-color:rgba(0,0,0,0.2); /* IE6和部分IE7內(nèi)核的瀏覽器(如QQ瀏覽器)會(huì)讀懂，但解析為透明 */
}
.demo p{
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明，文字也透明</p>
</div>
</html>CSS讓圖片由模糊變清淅，其實(shí)主要是使用了CSS Filter濾鏡來實(shí)現(xiàn)鼠標(biāo)懸停時(shí)改變圖片的透明度來實(shí)現(xiàn)。默認(rèn)狀態(tài)下，圖片的透明度是70，也就是有些透明，讓圖片看上去有點(diǎn)模糊，當(dāng)鼠標(biāo)移上的時(shí)候，圖片的透明度變?yōu)?，也就是不透明了，圖片看上去就清淅了，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>
