opacity這個小東西

smallwebbird發表於2018-12-11
原文網址 : https://juejin.im/post/5c0f88276fb9a049db72fa5c

我們先上程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
        .same{
            width: 100px;
            height: 100px;
        }
        .one{
            background: green;
        }
        .two{
            background: red;
            margin: -40px 0 0 40px; 
        }
        .three{
            background: blue;
            margin: -40px 0 0 80px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="same one"></div>
        <div class="same two"></div>
        <div class="same three"></div>
    </div>
</body>
</html>
複製程式碼

然後我們看一下效果

tim 20181211173126
然後我們修改以下樣式

 .two{
            background: red;
            margin: -40px 0 0 40px; 
            opacity: 0.5;
        }
複製程式碼

然後我們看一下效果

tim 20181211173310
我們發現第二個div，覆蓋了第一個和第三個，就好像設定了z-index一樣，我們在設定以下樣式

.three{
 background: blue;
 margin: -40px 0 0 80px;
postion:relative;
z-index:`100;
}
複製程式碼

我們在重新看一下效果

tim 20181211173947
又恢復了正常的層級關係 然後我們看一下rgba設定透明度和opacity相同嗎 設定如下樣式

 .one{
            background: green;
        }
        .two{
            background: rgba(0, 0, 0, 0.5);
            margin: -40px 0 0 40px; 
        }
        .three{
            background: blue;
            margin: -40px 0 0 80px;
        }
複製程式碼

然後我們看一下效果

tim 20181211174315
我們發現rgba不存在這種問題 這個問題最近準備寫一個遮屏效果，然後在遮屏元素中有一個子元素，子元素上顯示相關內容，為遮屏元素設定opacity，然後發現一隻遮蓋子元素，按理說設定z-index的父元素的層級總是比子元素低，除非子元素的z-index為負數，然後才發現是opacity在搞鬼，遮屏效果圖
tim 20181211174707
我並不知道這個原理是什麼，如果有什麼說錯的地方，請各位大神指出，第一次寫文章

相關文章