明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

如何使用CSS讓圖片完成半透明的效果

發(fā)表時間：2023-12-23 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]今天給大家?guī)淼拇a是如何使用CSS讓圖片實現(xiàn)半透明的效果，下面我們來看一下。 <style type="text/css"><!--.alpha img{ filter: Alpha(Opacity=30, FinishOpacity=0, Style=1,...
今天給大家?guī)淼拇a是如何使用CSS讓圖片實現(xiàn)半透明的效果，下面我們來看一下。

 <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) 更改里面的數(shù)字調(diào)節(jié)透明度和效果

注意的是在火狐或谷歌瀏覽器中這個CSS濾鏡效果不能實現(xiàn)或不起作用，所以我們一般推薦不使用CSS濾鏡，還有CSS濾鏡會導(dǎo)致用戶電腦內(nèi)存的占用過多，網(wǎng)頁瀏覽不暢，適可運用即可。

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

駝峰命名與JS的問題解答

JS里的布爾值、關(guān)系運算符、邏輯運算符的詳解及實例

前端的js框架總結(jié)以及用途講解

以上就是如何使用CSS讓圖片實現(xiàn)半透明的效果的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。