位置:首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS 濾鏡屬性 設(shè)置圖片不透明度

提問人:劉團圓發(fā)布時間:2020-11-19

    通過一個簡單的實例介紹如何在網(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>

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部