作者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