如何使用CSS讓圖片完成半透明的效果
發表時間:2023-12-23 來源:明輝站整理相關軟件相關文章人氣:
[摘要]今天給大家帶來的代碼是如何使用CSS讓圖片實現半透明的效果,下面我們來看一下。 <style type="text/css"><!--.alpha img{ filter: Alpha(Opacity=30, FinishOpacity=0, Style=1,...
今天給大家帶來的代碼是如何使用CSS讓
圖片實現半透明的效果,下面我們來看一下。
<style type="text/css">
<!--
.alpha img{ filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)}
-->
</style>
完整的html代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片半透明效果</title>
<style type="text/css">
</style>
</head>
<body>
<div class="alpha"><img src="http://www.php.cn/img/1.gif" width="180" /><br />
以上是CSS處理后效果<br />
<br />
</div>
<div><img src="http://www.www.php.cn/img/1.gif" width="180" /><br />
以上是處理前效果</div>
</body>
</html>
使用到的是CSS濾鏡效果代碼:filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100) 更改里面的數字調節透明度和效果
注意的是在火狐或谷歌瀏覽器中這個CSS濾鏡效果不能實現或不起作用,所以我們一般推薦不使用CSS濾鏡,還有CSS濾鏡會導致用戶電腦內存的占用過多,網頁瀏覽不暢,適可運用即可。
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
駝峰命名與JS的問題解答
JS里的布爾值、關系運算符、邏輯運算符的詳解及實例
前端的js框架總結以及用途講解
以上就是如何使用CSS讓圖片實現半透明的效果的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。