新聞中心
本篇內(nèi)容主要講解“css實現(xiàn)半透明效果的基本原理是什么”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“css實現(xiàn)半透明效果的基本原理是什么”吧!
半透明設(shè)置雖然簡單,但是它的應(yīng)用確實屢見不鮮,而且一旦用在了恰當(dāng)?shù)牡胤?,會給網(wǎng)頁增色不少,所以我單獨將它拿出來做了一篇單獨的介紹:
1、實現(xiàn)效果/應(yīng)用舉例
京東商城中
蘑菇街中
等等很多頁面中都存在半透明效果的模塊,現(xiàn)在我們來看一下它的基本原理
2、代碼實現(xiàn)
這個代碼實現(xiàn)如果之前你沒有看過,到了這里看完你一定會大喊oh,shit!!相信我,你無法想象它的簡單
html代碼中
代碼如下:
這個能不能實現(xiàn)透明
接下來就是實現(xiàn)的關(guān)鍵了,準(zhǔn)備高呼吧,吶喊吧,
css中增加樣式實現(xiàn)半透明
代碼如下:
#top{
opacity:0.1;
filter:alpha(opacity:10);
}
試試看效果啊,是不是成功了,這里來簡單解釋下上面兩句樣式,兩句其實意思是一樣的,但是由于瀏覽器不同,考慮兼容性就將其全部寫上了,后一個主要是針對ie瀏覽器應(yīng)用的濾鏡。
3、其他約束
文字的不透明,只要重新設(shè)置p即可
到此,相信大家對“css實現(xiàn)半透明效果的基本原理是什么”有了更深的了解,不妨來實際操作一番吧!這里是創(chuàng)新互聯(lián)建站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
新聞名稱:css實現(xiàn)半透明效果的基本原理是什么-創(chuàng)新互聯(lián)
網(wǎng)站地址:http://fisionsoft.com.cn/article/egghh.html