CSS 濾鏡屬性 設(shè)置圖片不透明度
通過一個(gè)簡單的實(shí)例介紹如何在網(wǎng)頁中設(shè)置圖片的不透明度，讓圖片在正常情況下的不透明度為50%，鼠標(biāo)移入之后則100%顯示。
【例題】設(shè)置圖片的不透明度
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #ccc;
}
h1{text-align: center;}
.container{
width: 750px;
margin:20px auto;
height: 500px;
border:1px solid #fff;
background: #fff;
padding:25px;
}
img{
display:block;
float:left;
margin:25px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
img:hover{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity: 1;
}
</style>
</head>
<body>
<h1>鼠標(biāo)移入圖片正常顯示</h1>
<div>
<img src="tomjerry.jpg" alt="">
<img src="tomjerry.jpg" alt="">
<img src="tomjerry.jpg" alt="">
<img src="tomjerry.jpg" alt="">
<img src="tomjerry.jpg" alt="">
<img src="tomjerry.jpg" alt="">
</div>
</body>
</html>
湘公網(wǎng)安備:43011102000856號 
點(diǎn)擊加載更多評論>>