CSS顏色透明度

本文轉載自查看原文 2019-09-07 22:32 8563 透明opacity

一、設置元素背景透明度

opacity可以用來設置元素背景的透明度；它需要0~1之間的值

0表示完全透明（opacity:0）；

1表示完全不透明（opacity:1）；

0.5表示半透明（opacity:0.5）；

代碼演示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>opactity</title>
 6     <style>
 7     .box1{
 8                 position:relative;
 9         width:200px;height:200px;
10         background-color: #00f;
11     }
12          .box2{
13               position:absolute;
14               top:80px;
15               left:80px;
16               width:200px;
17               height:200px;
18               background-color:#0f0;
19        }
20        .box3{
21              position:relative;
22               width:200px;
23               height:200px;
24               background-color:#f00;
25               z-index:1;
26 }
27 </style>
28 </head>
29 <body>
30     <div class="box1"></div>
31        <div class="box2"></div>
32        <div class="box3"></div>
33 </body>
34 </html>

對比一下元素在設置同名之前的表現效果：

設置透明度的效果

 1  .box1{
 2                  position:relative;
 3              width:200px;height:200px;
 4             background-color: #00f;
 5             z-index:10;
 6             opacity:0.5;
 7      }
 8           .box2{
 9                position:absolute;
10                top:80px;
11                left:80px;
12                width:200px;
13                height:200px;
14                background-color:#0f0;
15                z-index:5;
16                opacity:0.5;
17         }
18         .box3{
19                position:relative;
20                width:200px;
21                height:200px;
22               background-color:#f00;
23              z-index:1;
24                opacity:0.5;
25  }

表現效果：

二、瀏覽器兼容性問題：

opacity屬性在IE8及其以下的瀏覽器中不支持

為了實現透明效果，IE8及其以下的瀏覽器需要使用如下標簽代替：

alpha(opacity=透明度)

透明度選擇一個0~100之間的值

0表示完全透明（filter:alpha(opacity=0);）

100表示完全不透明（filter:alpha(opacity=100);）

50表示半透明（filter:alpha(opacity=50);）

這種方式支持IE6

filter:alpha(opacity=50);

 1 .box1{
 2                 position:relative;
 3         width:200px;height:200px;
 4         background-color: #00f;
 5                 z-index:10;
 6                 opacity:0.5;
 7                 filter:alpha(opacity=10);
 8     }
 9 .box2{position:absolute;
10       top:80px;
11       left:80px;
12       width:200px;
13       height:200px;
14       background-color:#0f0;
15       z-index:5;
16       opacity:0.5;
17       filter:alpha(opacity=50);}
18 .box3{
19       position:relative;
20       width:200px;
21       height:200px;
22       background-color:#f00;
23       z-index:1;
24 opacity:0.5;
25 filter:alpha(opacity=80)}

表現效果：在IE8及其以下的瀏覽器也可以很好地適應

因為filter:alpha(opacity=透明度) 這條元素寫在下面，所以 filter:alpha(opacity=透明度) 的優先級要高於 opacity:0.5; 的優先級。最終表現效果不是opacity:0.5

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css顏色與透明度 CSS顏色透明度 css 背景顏色透明度 css的顏色表示，與透明度 css3顏色+透明度漸變 css顏色+透明度的寫法 CSS透明度 RGB顏色透明度 CSS（五）- 漂亮的盒子 - 背景顏色透明度 css16進制顏色透明度問題