Java Artisan / Neil Chan: 如何在半透明背景使用不透明文字或圖片

2012-10-09

如何在半透明背景使用不透明文字或圖片

這是一個常見的困擾，若背景使用了半透明顏色或圖片，像是彈出視窗後面的遮片（mask）就會這麼做，但是放在這個半透明 div 裡的所有物件也都會變成半透明，這就很傷腦筋了，導致彈出視窗的圖文變得模糊了。

聽說 CSS3 有專門的解法，但是這邊先用 CSS2 之前的作法。

原理很簡單，就是因為上下層的透明度會傳染，那就切斷上下層的關係就好了，也就是說彈出視窗和遮片是在同一層，然後用 position 為 absolute 將兩個 div 疊在一起。

<div class="body">

  <!-- 上下層關係造成子層一定跟著上層的透明度 -->
  <div class="opacityParentA">
    <div class="opacityChildA">我變透明了</div>
  </div>
  
  <div class="opacityParentB">
    <!-- 改成兩個平行的 absolute position div -->
    <!-- 下層做半透明背景 -->
    <div class="opacityBackgroundB"></div>
    <!-- 上層的透明度就不受影響 -->
    <div class="opacityChildB">我不是透明</div>
  </div>
  
</div>

<style type="text/css">
div.body {
  margin: 50px auto;
  width: 200px;
  height: 200px;
  background-image: url(images/Amelie.jpg);
  padding: 20px 10px 20px 50px;
}

div.opacityParentA {
  opacity: 0.5; /* 半透明背景 */
  background-color: #cfc;
  border: 1px solid #00f;
  width: 100px;
  height: 50px;
  margin: 20px;
}

div.opacityParentB {
  border: 1px solid #00f;
  position: relative;
  width: 100px;
  height: 50px;
  margin: 20px;
}

div.opacityParentB .opacityBackgroundB {
  opacity: 0.5; /* 半透明背景 */
  background-color: #cfc;
  width: 100%; /* 佔滿整個上層背景 */
  height: 100%;
  position: absolute; /* 一定要 */
}

div.opacityParentB .opacityChildB {
  position: absolute; /* 一定要 */
}
</style>

這樣就可以得到以下的結果。

2012/11/7 補上 CSS3 的作法。

<style type="text/css">
body {
  background-image: url(AmeliePoulain04.jpg);
}

div {
  position: abosolute;
  width: 160px;
  height: 60px;
  margin: 30px auto;
  font-size: 16pt;
  font-weight: bold;
}

div#normalDiv {
  background-color: rgb(255, 255, 255);
  opacity: 0.5;
}

div#css3Div {
  background-color: rgba(255, 255, 255, 0.5);
}
</style>
<body>
  <div id="normalDiv">我變透明了！</div>
  <div id="css3Div">我不要變透明！</div>
</body>

CSS3 增加了 rgba 這樣的 function。