如何實現容器透明,內容不透明?

2022-08-26 11:48:10 字數 1309 閱讀 7910

3.透明度問題(opacity)

在ie中透明度不顯示,

當我們向父元素中新增子元素的時候,就會發現子元素繼承了父元素的透明度。而在某些情況下這是我們不希望發生的。即使你重新設定子元素的透明度為不透明,它仍然會繼承父元素的透明度。

要怎樣解決這個問題呢?我們可以使用絕對定位來使這些元素看起來像父子關係。

你會看到,在上面的demo中左右兩邊的元素結構看起來好像是一樣的。而其實並非如此。左邊的例子是實實在在的父子元素關係,所以父元素的透明度會影響到子元素。而右邊的例子其實是使用了絕對定位使它們看起來像父子關係,所以父元素的透明度並沒有影響到子元素。

你可以向右邊的那個例子中新增更多的元素,並且不會被「父元素」的透明度影響,因為他們根本就不是

的子元素,而是它的兄弟節點,但是使用了絕對定位使它們看起來是它的子元素。

關鍵點就在設定透明度的元素並非擁有子元素,所以它的透明度屬性不會影響到頁面上的其他元素。但是,同其他hack方法一樣,這種方法也有缺點。

缺點:這種方法在試圖移除父元素透明度對子元素影響的情況下是非常有用的。但是它的缺點限制了它在更多場合下的應用,所以有必要把他們列出來。

1.既然這個元素(設定透明度的元素)不包含任何內容,你必須設定確定的寬度和高度,並且在它所包含內容變化的時候調整尺寸。這個缺點使得在大多數情況下不使用這種hack方法。

2.由於絕對定位的元素並不是「父元素」(指設定了透明度的元素)真正的子元素,要維持這種狀況會很困難,尤其是在一些需要繼承的專案中。

3.絕對定位元素是在文件流之外的,所以在頁面發生變化的時候會發生布局問題。

4.需要乙個額外的標籤。

方法1:

.outer

.inner

我是不透明的內容

原理是容器層與內容層並級,容器層設定透明度,內容層通過負margin或者position絕對定位等方式覆蓋到容器層上

方法2:

.outer

.outer .inner

我是不透明的內容

高階瀏覽器直接使用rgba顏色值實現;ie瀏覽器在定義容器透明的同時,讓子節點相對定位,也可達到效果

css容器背景透明,內部文字內容不透明

設定透明背景文字不透明,可採用的屬性有rgba和ie的專屬濾鏡filter alpha,其相容性如下圖所示 針對ie6 7 8瀏覽器,我們可以採用fiter alpha,針對標準瀏覽器我們採用rgba,那麼問題來了,ie9瀏覽器2個屬性都支援,一起使用會重複降低不透明度.那麼,如何只對ie6 7 8...

css如何實現背景透明,文字不透明?

之前做了個半透明彈層,但設定背景半透明時,子元素包含的字型及其它元素也都變成了半透明。對opacity這個屬性認識的不透徹,在這裡做一些總結,方便以後使用。背景透明,文字不透明的解決方法 為元素新增乙個絕對定位的子元素,設定大小和該元素一樣,把半透明加在絕對定位元素上作為遮罩,z index設定到最...

css如何實現背景透明,文字不透明

之前做了個半透明彈層,但設定背景半透明時,子元素包含的字型及其它元素也都變成了半透明。對opacity這個屬性認識的不透徹,在這裡做一些總結,方便以後使用。背景透明,文字不透明的解決方法 為元素新增乙個絕對定位的子元素,設定大小和該元素一樣,把半透明加在絕對定位元素上作為遮罩,z index設定到最...