關於opacity透明度子元素繼承現象的若干研究以及hack方法

時間 2019-11-14

標籤關於 opacity 透明度元素繼承現象若干研究以及 hack 方法欄目軟件設計简体版

原文原文鏈接

【感想】信息時代的信息是有時效性的，今天是確確實實感覺到了。互聯網資料雖然豐富，可是質量不一，還有大量的跟風雷同，不少人都是隨手拷貝過來，根本沒有實踐。之前端爲例，這兩年瀏覽器的迅猛發展，形成不少原有知識的失效。可是網上仍是大量充斥了之前失效的解決方案。我以爲，咱們應本着實踐精神，對任何問題的解決方案進行實際測試。須知：紙上得來終覺淺，絕知此事要躬行。javascript

今天遇到一個關於透明度的問題。css

你們都知道在css3中增長的新屬性opacity——不透明度的設定。html

使用了opacity的元素，它的不透明度會被子元素繼承。例如：1_demo.html前端

代碼以下：java

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
    body{ background-color: #000; }
    .a{ width: 200px; height: 150px; background-color: #37a7d7; color: #fff; }
    .opacity{ filter:alpha(opacity=50); /*for IE*/opacity: 0.5;/*非IE*/ }
    </style>
</head>
<body>
    <div class="a">我是b-DIV</div>
    <div class="a opacity">我是b-DIV</div>
</body>
</html>

效果以下:css3

能夠看出，不光b-DIV自己透明度改變了，他的子元素的透明度也跟着改變了。chrome

有時候咱們不但願子元素的透明度改變，例如上面的例子，咱們不但願裏面的字也變得透明。下面咱們作幾個實驗試試。瀏覽器

1、

網上流傳很廣的一個方法，是給子元素在給包裹起來，而後設置position爲relative或者absoluteapp

例如，咱們更改上面例子的代碼，2_demo.htmlide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
    body{ background-color: #000; }
    .a{ width: 200px; height: 150px; background-color: #37a7d7; color: #fff; }
    .opacity{ filter:alpha(opacity=50); /*for IE*/opacity: 0.5;/*非IE*/ }
    </style>
</head>
<body>
    <div class="a">
        <div>我是b-DIV</div>
    </div>
    <div class="a opacity">
        <div style="position:relative">我是b-DIV</div><!-- 我是新增代碼 -->
    </div>
</body>
</html>

firefox31下:

chrome35下：

IE9-11下：

可是在IE七、8下居然能夠：

老辦法還真是隻能對付「老瀏覽器」…….

2、

看來在firefox、chrome和IE9/10/11 下，利用position把子元素脫出文檔流這種方法應該是無解了。

那咱們換個思路，直接給子元素定義opacity:1行不行。

<div style="position:relative;opacity: 1">我是b-DIV</div>

例子：3_demo.html

實際上是這樣的，若是父元素定義了opacity，那麼子元素在定義一個opacity，那麼子元素的效果實際上是二者的乘積…

例如，父元素的opacity:0.5，子元素opacity:0.2，那麼子元素實際的opacity=0.5x0.2=0.1

這個你們能夠本身嘗試下就知道了。

設置了opacity的父元素，此屬性必定會被子元素繼承。

3、

第三種方法：使用css3的另外一個屬性：background-color:rgba();

以上面的背景色 #37a7d7爲例，其rgb寫法爲：rgb(55,167,215)，二者能夠等價交換。

在css3中的rgba()，rgba(55,167,215,0.5)，其中第四項0.5即爲不透明度。

例子：4_demo.html

聰明的你必定立刻想到那麼

background-color:rgba(55,167,215,0.5);

等價於

background-color:rgb(55,167,215);opacity:0.5;

是，也不徹底是。由於對於使用rgba設置的不透明度，子元素是不會繼承的。

可是，IE七、8是不支持rgba()…..

4、

經過上面這些方法，咱們能夠看出來，子元素是必須繼承父元素的opacity。那咱們再換個思路，不讓它成爲子元素呢？例子:5_demo.html

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
    body{
    background-color: #000;margin: 0;padding: 0;
}
    .noOpacity{
    width: 300px;
    height: 250px;
    background-color: #37a7d7;
    color: #fff;
}
/*上面的是背景對比，如下是方法*/
    .container {
    width: 300px;
    height: 250px;
    color: #fff;
    position:relative;
}
   .content {
    position:relative;
    z-index:5;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
   .background {
    background-color: #37a7d7;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
    /*兼容IE七、8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:.5;
}
    </style>
</head>
<body>
    <div class="noOpacity">我是用來做對比的</div>
    <div class="container">
        <div class="content">
            <p>我是class爲content的DIV</p>
            <p>個人背景是class爲background的背景</p>
            <p>經過相對定位和絕對定位，我把class爲background的DIV移動到了個人位置。</p>
            <p>同時經過個人較大的z-index浮在了它的上面。 :)</p>
            <p style="text-align:right">——劉龍(liulo)</p>
        </div>
        <div class="background"></div>
    </div>
</body>
</html>