IE7浮動圖層背景透明內容文字也透明的問題

在 IE 要讓容器有透明背景,但內容文字不透明的寫法,是在父容器設置 CSS:filter.opacity(50),而內層子容器上的 CSS:position 屬性設置為「absolute」或是「relative」這樣就可以達到透明背景不透明內容的效果。在正常的情況下 IE7 和 IE8 都可以運作的很好,但是當父容器是浮動圖層時(position:absolute)IE7 會背景和內容全都變透明,而IE8卻不會受到影響。

要解決 IE7 浮動圖層背景透明且文字內容也透明的問題,可以在浮動圖層裏加上一子容器。然後在新加上來的子容器上設置透明背景,而不像先前那樣直接在浮動圖層上設置透明背景。如此 IE7就不會有浮動圖層上背景和文字都透明的問題發生。

實作說明(請用IE7、IE8來比較差異)

一般狀況IE透明背景設定

文字不透明、背景透明

浮動圖層IE7透明背景設定

IE7 文字不透明、背景透明

IE8 文字不透明、背景透明

IE7 文字透明、背景透明

IE8 文字不透明、背景透明

看到了沒!!這些文字是在透明圖層的下面喔。

這是上面這些結果的 html 程式碼

<!--一般狀況IE透明背景設定-->
<div style="filter:alpha(opacity=50);background-color:green;width:200px;height:100px;">
<div style="position:relative;">文字不透明、背景透明</div>
</div>

<!--浮動圖層IE7透明背景設定-不直接在浮動圖層上設置透明背景,在加一層做透明圖-->層。
<div style="position:absolute;width:200px;height:100px;top:925px;">
<div style="filter:alpha(opacity=50);background-color:green;width:100%;height:100%;">
<div style="position:relative;">
<p>IE7 文字不透明、背景透明</p>
<p>IE8 文字不透明、背景透明</p>
</div>
</div>
</div>

<!--浮動圖層IE7透明背景設定-直接在浮動圖層上設置透明背景-->
<div style="filter:alpha(opacity=50);background-color:green;width:200px;height:100px;position:absolute;top:925px;left:280px;">
<div style="position:relative;">
<p>IE7 文字透明、背景透明</p>
<p>IE8 文字不透明、背景透明</p>
</div>
</div>

為什現在還是有人在使用 IE7 真是想不通,明明瀏覽器這麼多款可以選擇不什麼不換一換呢?

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s