溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“css實現半透明效果的基本原理是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css實現半透明效果的基本原理是什么”吧!
半透明設置雖然簡單，但是它的應用確實屢見不鮮，而且一旦用在了恰當的地方，會給網頁增色不少，所以我單獨將它拿出來做了一篇單獨的介紹：
1、實現效果/應用舉例
京東商城中 
蘑菇街中 
等等很多頁面中都存在半透明效果的模塊，現在我們來看一下它的基本原理
2、代碼實現
這個代碼實現如果之前你沒有看過，到了這里看完你一定會大喊oh,shit!!相信我，你無法想象它的簡單
html代碼中
代碼如下:
<span ><div id="bottom" >
<div id="top" ></div>
<p>這個能不能實現透明</p>
</div></span>
接下來就是實現的關鍵了，準備高呼吧，吶喊吧，
css中增加樣式實現半透明
代碼如下:
<span >#top{
opacity:0.1;
filter:alpha(opacity:10);
}</span>
試試看效果啊，是不是成功了，這里來簡單解釋下上面兩句樣式，兩句其實意思是一樣的，但是由于瀏覽器不同，考慮兼容性就將其全部寫上了，后一個主要是針對ie瀏覽器應用的濾鏡。
3、其他約束
文字的不透明，只要重新設置p即可
到此，相信大家對“css實現半透明效果的基本原理是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
