Re: [問題] 透明度的問題

[gpmm (銀色)]

※ 引述《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
推 hubin:太感謝您了
推 ljm71:請問*html是什麼呢?
→ gpmm:*html 是 IE 才能理解的 css 定義， MF 或當作錯誤不理會
→ gpmm:另外， IE7 要用 *+html
推 ljm71:了解~果然瀏覽器問題很深奧(?) 請問這些CSS hack要怎麼學呢?
→ gpmm:經驗 + google  …囧