css實(shí)現(xiàn)半透明效果基本原理
發(fā)布時(shí)間：2014-05-20 10:35:04 作者：佚名 
我要評論
我要評論半透明設(shè)置雖然簡單，但其應(yīng)用確實(shí)屢見不鮮，很多頁面中都存在半透明效果的模塊，現(xiàn)在我們來看一下它的基本原理
半透明設(shè)置雖然簡單，但是它的應(yīng)用確實(shí)屢見不鮮，而且一旦用在了恰當(dāng)?shù)牡胤?，會給網(wǎng)頁增色不少，所以我單獨(dú)將它拿出來做了一篇單獨(dú)的介紹：
1、實(shí)現(xiàn)效果/應(yīng)用舉例
京東商城中
蘑菇街中
等等很多頁面中都存在半透明效果的模塊，現(xiàn)在我們來看一下它的基本原理
2、代碼實(shí)現(xiàn)
這個(gè)代碼實(shí)現(xiàn)如果之前你沒有看過，到了這里看完你一定會大喊oh,shit!!相信我，你無法想象它的簡單
html代碼中
<span style="font-size:12px;"><div id="bottom" style="width: 500px;height: 500px;background: url('img/2.jpg');">
<div id="top" style="width: 100px;height: 100px;background-color: yellow;"></div>
<p>這個(gè)能不能實(shí)現(xiàn)透明</p>
</div></span>
接下來就是實(shí)現(xiàn)的關(guān)鍵了，準(zhǔn)備高呼吧，吶喊吧，
css中增加樣式實(shí)現(xiàn)半透明
<span style="font-size:12px;">#top{
opacity:0.1;
filter:alpha(opacity:10);
}</span>
試試看效果啊，是不是成功了，這里來簡單解釋下上面兩句樣式，兩句其實(shí)意思是一樣的，但是由于瀏覽器不同，考慮兼容性就將其全部寫上了，后一個(gè)主要是針對ie瀏覽器應(yīng)用的濾鏡。
3、其他約束
文字的不透明，只要重新設(shè)置p即可
是不是有點(diǎn)瞬間崩潰的感覺，原來這么簡單，差點(diǎn)就錯(cuò)過了，不過亡羊補(bǔ)牢，善莫大焉
1、實(shí)現(xiàn)效果/應(yīng)用舉例
京東商城中
蘑菇街中
等等很多頁面中都存在半透明效果的模塊，現(xiàn)在我們來看一下它的基本原理
2、代碼實(shí)現(xiàn)
這個(gè)代碼實(shí)現(xiàn)如果之前你沒有看過，到了這里看完你一定會大喊oh,shit!!相信我，你無法想象它的簡單
html代碼中
復(fù)制代碼
代碼如下:<span style="font-size:12px;"><div id="bottom" style="width: 500px;height: 500px;background: url('img/2.jpg');">
<div id="top" style="width: 100px;height: 100px;background-color: yellow;"></div>
<p>這個(gè)能不能實(shí)現(xiàn)透明</p>
</div></span>
接下來就是實(shí)現(xiàn)的關(guān)鍵了，準(zhǔn)備高呼吧，吶喊吧，
css中增加樣式實(shí)現(xiàn)半透明
復(fù)制代碼
代碼如下:<span style="font-size:12px;">#top{
opacity:0.1;
filter:alpha(opacity:10);
}</span>
試試看效果啊，是不是成功了，這里來簡單解釋下上面兩句樣式，兩句其實(shí)意思是一樣的，但是由于瀏覽器不同，考慮兼容性就將其全部寫上了，后一個(gè)主要是針對ie瀏覽器應(yīng)用的濾鏡。
3、其他約束
文字的不透明，只要重新設(shè)置p即可
是不是有點(diǎn)瞬間崩潰的感覺，原來這么簡單，差點(diǎn)就錯(cuò)過了，不過亡羊補(bǔ)牢，善莫大焉
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時(shí)控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非常基礎(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性，用于告訴瀏覽器某個(gè)元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26
