溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css實(shí)現(xiàn)半透明效果的基本原理是什么

發(fā)布時(shí)間：2021-07-27 21:35:03 來源：億速云 閱讀：144 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“css實(shí)現(xiàn)半透明效果的基本原理是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css實(shí)現(xiàn)半透明效果的基本原理是什么”吧!

半透明設(shè)置雖然簡(jiǎn)單，但是它的應(yīng)用確實(shí)屢見不鮮，而且一旦用在了恰當(dāng)?shù)牡胤?，?huì)給網(wǎng)頁增色不少，所以我單獨(dú)將它拿出來做了一篇單獨(dú)的介紹：

1、實(shí)現(xiàn)效果/應(yīng)用舉例

京東商城中
css實(shí)現(xiàn)半透明效果的基本原理是什么 
蘑菇街中
css實(shí)現(xiàn)半透明效果的基本原理是什么 

等等很多頁面中都存在半透明效果的模塊，現(xiàn)在我們來看一下它的基本原理

2、代碼實(shí)現(xiàn)

這個(gè)代碼實(shí)現(xiàn)如果之前你沒有看過，到了這里看完你一定會(huì)大喊oh,shit!!相信我，你無法想象它的簡(jiǎn)單

html代碼中

代碼如下:


<span ><div id="bottom" >
<div id="top" ></div>
<p>這個(gè)能不能實(shí)現(xiàn)透明</p>
</div></span>


接下來就是實(shí)現(xiàn)的關(guān)鍵了，準(zhǔn)備高呼吧，吶喊吧，

css中增加樣式實(shí)現(xiàn)半透明

代碼如下:


<span >#top{
opacity:0.1;
filter:alpha(opacity:10);
}</span>


試試看效果啊，是不是成功了，這里來簡(jiǎn)單解釋下上面兩句樣式，兩句其實(shí)意思是一樣的，但是由于瀏覽器不同，考慮兼容性就將其全部寫上了，后一個(gè)主要是針對(duì)ie瀏覽器應(yīng)用的濾鏡。

3、其他約束

文字的不透明，只要重新設(shè)置p即可

到此，相信大家對(duì)“css實(shí)現(xiàn)半透明效果的基本原理是什么”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手