css屬性transparent不透明問題解析

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

透明往往能產生不錯的網頁視覺效果，先奉上相容主流瀏覽器的CSS透明代碼:

代碼如下	複製代碼
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }

上面的幾個屬性分別是:

•opacity: 0.5; 這是最重要的，因為它是CSS標準.該屬性支援Firefox, Safari和 Opera.
•filter:alpha(opacity=50); 這個是為IE6設的，可取值在0-100，其它三個0到1.
•-moz-opacity:0.5; 這個是為了支援一些老版本的Mozilla瀏覽器。
•-khtml-opacity: 0.5; 這個為了支援一些老版本的Safari瀏覽器。

CSS透明度繼承問題

但CSS的透明屬性涉及到一個繼承問題，當為父級元素設定透明度後，子項目將自動繼承其透明度，比如本站的一個效果:

即使你又為子項目指定透明度為1也是無效的。

對於子項目是文字的情況，我的解決方案一般是如果多少還能夠看清，就不管。另一個折衷的方法是，為文本子項目指定一個相對更深的顏色。也就是說，當子項目繼承透明度後，所得到的文本顏色正好就是你想要的。前提是，這個顏色還有加深的可能，和需要詳細的計算顏色和透明度的值。

還有“取消透明度繼承”的說法，這個說法是不太準確的，據我個人所知，沒有任何取消透明度繼承的方法。只能說，當想要實現“多個元素覆蓋，只讓指定的元素透明”時，可以使用的一些Hack。

關於transparent以及rgba(0,0,0,0)，在webkit與沒有消除鋸齒的瀏覽器下對border渲染正常，但是在有消除鋸齒渲染的瀏覽器下（ff，ie9）明顯就不正常(winXP)。
首先看一個例子

代碼如下

複製代碼

<!DOCTYPE html>
<html lang="en">
<head>
        <meta name="keywords" content="前端開發,CSS,HTML,XHTML,JS" />
<meta name="description" content="專註前端技術部落格 caihong.cc" />
<title>WEB前端開發 | 閃亮於WEB前端的彩虹</title>
   <style>
   *{
   margin:0;
   padding:0;
   }
.mold{
width:100px;
height:100px;
border-top: 100px solid transparent;
border-left: 100px solid #eee;
border-bottom: 100px solid transparent;
border-right: 100px solid #eee;
}
   </style>
</head>
<body >
<div class="mold"></div>
</body>
</html>

這個例子在webkit下兩條透明的表框表現是沒任何問題的，但是在FF下面，border與border的那個對角線位置，明顯多出了一條黑線

因為firefox的消除鋸齒處理會讓border之間漸層過渡，也就是說從rgba(238,238,238,1)到rgba(0,0,0,0)進行漸層處理，那條黑線恰好是兩個顏色之間的中間色。

所以為了讓瀏覽器渲染一樣，以後大家寫border透明色的時候，必須寫相鄰border相同顏色的透明，比如上面的例子

代碼如下

複製代碼

border-top: 100px solid transparent;
border-left: 100px solid #eee;

就要改成

border-top: 100px solid rgba(238,238,238,0);
border-left: 100px solid #eee;

也就是說，在某些時候，border的透明處理不要簡單的寫為transparent

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More