使用CSS設置一個圖片的透明效果
效果:可以通過前面的圖片看到后面的圖片
主要用的是filter:alpha(opacity=50);
其中50為透明值,0表示完全透明,100表示不透明。
詳細代碼:
<HTML>
<HEAD>
<TITLE> 圖片透明效果 </TITLE>
<style>
body {
background-image: url(images/1.jpg);
}
#nav {
width:760px;
height:90px;
margin:15px 0 0 10px;
overflow:hidden;
margin-top:100px;
margin-left:20px;
filter:alpha(opacity=50);
background:url(http://www.sj33.cn/images/logo.gif) no-repeat;
}
</style>
</HEAD>
<BODY>
<div id="nav">
</div>
</BODY>
</HTML>
效果:可以通過前面的圖片看到后面的圖片
主要用的是filter:alpha(opacity=50);
其中50為透明值,0表示完全透明,100表示不透明。
詳細代碼:
<HTML>
<HEAD>
<TITLE> 圖片透明效果 </TITLE>
<style>
body {
background-image: url(images/1.jpg);
}
#nav {
width:760px;
height:90px;
margin:15px 0 0 10px;
overflow:hidden;
margin-top:100px;
margin-left:20px;
filter:alpha(opacity=50);
background:url(http://www.sj33.cn/images/logo.gif) no-repeat;
}
</style>
</HEAD>
<BODY>
<div id="nav">
</div>
</BODY>
</HTML>
标签:css教程
推薦設計
優秀海報設計精選集(8)海報設計2022-09-23
充滿自然光線!32平米精致裝修設計2022-08-14
親愛的圖書館 | VERSE雜誌版版式設計2022-07-11
生活,就該這麼愛!2022天海報設計2022-06-02
最新文章
用css實現文字的自動隱藏html+css2011-11-14
常用CSS縮寫語法總結html+css2011-11-14
用CSS設計高用戶體驗的whtml+css2011-11-14
由淺入深漫談margin屬性html+css2011-11-14