作者gpmm (銀色)
看板Web_Design
標題Re: [問題] 透明度的問題
時間Sun Dec 23 12:23:44 2007
※ 引述《hubin (阿賓  NN)》之銘言：
: ※ 引述《gpmm (銀色)》之銘言：
: : 如果要背景為透明，內元件不為透明，
: : 只要外元件在不定位的情形下，定位內元件讓他脫離外元件的包含即可。
: : <div style="filter: Alpha(Opacity=50, Style=0);">
: : <div style="position:relative;"></div>
: : </div>
: : 如果外元件也嵌 relative 或 absolute 就會破了。
: 我試了大大您說的方法
: ie6是可行的，但firefox似乎不為所動
: 我再多試一下
mf 的部份我能力不足，目前還不知道有什麼可以乾淨俐落的解決方式。
如果你願意接受複雜一點的 hack 的話…
html:
<div class="back">
<div class="backHacker"></div>
<div class="content">Text</div>
</div>
css:
div.back {
position: relative;
width: 100px;
height: 100px;
}
div.backHacker {
position: absolute;
background-color: red;
width: 100%;
height: 100%;
-moz-opacity:.5;
opacity:.5;
}
div.content {
position: relative;
}
*html div.back {
background-color: red;
position: static;
filter: Alpha (Opacity=50, Style=0);
}
*html div.backHacker {
display: none;
}
無論在哪個瀏覽器中的 css 規則，兄弟元素間是不會繼承透明屬性的，
因此在 MF 中可以用這個來實做。
而由於 MF 對百分比的支援度比較好，所以 IE 仍舊保留原本的做法。
上面的 css 中，將原本要透明的背景放置到 backHacker 中，
並且利用 absolute 和 width、height 100% 讓他充盈原本的 back 空間。
針對 IE hack 的部份，則是將透明部份放進原 back 裡，且將 backHacker
display none 掉，再把 content position relative 以達到脫出透明效果。
要注意的是，因為 absolute 會向上尋找 absolute 或 relative 作為基準點，
所以一開始（為了 MF ）是將 back 設為 relative，但在 IE 的內元件超脫中，
如果外層也為 relative 或 absolute 時會失效，
故 back 在 IE hacker 中要將 position 設回 static。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.139.236.80
1F：推 hubin:太感謝您了 12/23 23:57
2F：推 ljm71:請問*html是什麼呢? 12/24 01:28
3F：→ gpmm:*html 是 IE 才能理解的 css 定義， MF 或當作錯誤不理會 12/24 09:21
4F：→ gpmm:另外， IE7 要用 *+html 12/24 09:21
5F：推 ljm71:了解~果然瀏覽器問題很深奧(?) 請問這些CSS hack要怎麼學呢? 12/24 14:11
6F：→ gpmm:經驗 + google …囧 12/24 15:27