CSS如何只改變父元素背景透明度不改變子元素透明度
發(fā)布時(shí)間：2014-10-17 16:54:29 作者：佚名 
我要評論
我要評論使用css的opcity屬性改變某個元素的透明度，但是其元素下的子元素的透明度也會被改變，即便重定義也沒有用，不過有個方法可以實(shí)現(xiàn)，大家可以看看
一般情況下，我們可以使用css的opcity屬性改變某個元素的透明度，但是其元素下的子元素的透明度也會被改變，即使對子元素重新定義也沒有用，例如：
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
顯示文字
</div>
</div>
文字元素的透明度也會是0.4。
于是想一想，如果有方法只改變背景的透明度就能解決此問題了。
方法1：使用一張透明的圖片做背景可以達(dá)成效果，但是有沒有更簡單的方法呢？
方法2：使用RGBA。
例如：
<div style="0, 0, 0.4)">
<div>
顯示文字
</div>
</div>
復(fù)制代碼
代碼如下:<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
顯示文字
</div>
</div>
文字元素的透明度也會是0.4。
于是想一想，如果有方法只改變背景的透明度就能解決此問題了。
方法1：使用一張透明的圖片做背景可以達(dá)成效果，但是有沒有更簡單的方法呢？
方法2：使用RGBA。
例如：
復(fù)制代碼
代碼如下:<div style="0, 0, 0.4)">
<div>
顯示文字
</div>
</div>
相關(guān)文章
CSS子元素跟父元素的高度一致的實(shí)現(xiàn)方法
這篇文章主要介紹了CSS子元素跟父元素的高度一致的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2020-09-02- 這篇文章主要介紹了CSS子元素選擇父元素的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2020-09-01
解決CSS中子元素z-index與父元素兄弟節(jié)點(diǎn)的層級問題
這篇文章主要介紹了解決CSS中子元素z-index與父元素兄弟節(jié)點(diǎn)的層級問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可2020-06-17
css中子元素設(shè)置margin-top為什么影響了父元素
這篇文章主要介紹了css中子元素設(shè)置margin-top為什么影響了父元素，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2019-05-22- :nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不論元素的類型。下面有個不錯的示例，大家可以參考下2014-03-03
父元素與子元素之間的margin-top問題(css hack)
給子元素盒子一個垂直外邊距margin-top,父元素盒子也會往下走margin-top的值，遇到此問題的朋友可以參考下本文或許會有意想不到的收獲2013-03-19
css子元素相對父元素進(jìn)行定位的實(shí)現(xiàn)
這篇文章主要介紹了css子元素相對父元素進(jìn)行定位的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-09-02
