rgba 和 opacity 的對比.

本文轉載自查看原文 2017-07-18 18:45 1411 css

rgba 中的 a 指的是透明度:

1. rgba 的設置的透明度不會被子級元素繼承; opacity 設置的透明度會被子級元素繼承 .

　　因此 ,有時候使用 rgba 會比 opacity 效果更好;

2. rgba 可以設置background-color , color , border-color , text-shadow , box-shadow,

------------------------------

實例: 在一個背景上 ,設置一個子背景 ,這個子背景透明, 同時子背景中的內容不透明 .

1)使用 opacity .

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>opaciyt</title>
 6 
 7     <style type="text/css">
 8          .bg-box {
 9            width: 200px;
10            height: 200px;
11            border: 1px solid #ccc;
12            background: red;
13            position: relative;
14          }
15          .bg {
16            background: black;
17            opacity: 0.5;
18            filter:alpha(opacity=50);
19            width: 100%;
20            height: 100px;
21            position: absolute;
22            bottom: 0;
23            left: 0;
24            z-index: 1;
25           }
26           .bg-content {
27             width: 100%;
28             height: 100px;
29             position: absolute;
30             bottom: 0;
31             left: 0;
32             z-index: 10;
33           }
34           .bg-content p {
35              padding: 5px 10px;
36              color: white;
37              font-size: 16px;
38           }
39 
40 
41     </style>
42 </head>
43 <body>
44     <div class="bg-box">
45       <div class="bg">  </div>
46        <div class="bg-content">
47           <p>我是bg的后代元素，我不想我的前景有任何透明!怎么辦?</p>
48         </div>
49     </div>
50 
51 
52 </body>
53 </html>

這里是個 bg-content 的兄弟節點 bg 加上透明度 .

同時絕對定位 ,使得 bg 和 bg-content 重合 ;

同時 bg 的 z-index 要小於 bg-content 的 z-index , 使得 bg 在 bg-content 下面.

-----------

如果不是上面的那樣 ,而是給 bg-content 的父級加上透明度 , 那么 bg-content 就會繼承透明度, bg-content中的內容也會繼承透明度. 這樣就不是我們想要達到的效果了.

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>opaciyt-2</title>
 6 
 7     <style type="text/css">
 8 
 9           .bg-box {
10             width: 200px;
11             height: 200px;
12             border: 1px solid #ccc;
13             background: red;
14             position: relative;
15           }
16          .bg {
17             background: black;
18             opacity: 0.5;
19             filter:alpha(opacity=50);
20             width: 100%;
21             height: 100px;
22             position: absolute;
23             bottom: 0;
24             left: 0;
25           }
26 
27           .bg p {
28             padding: 5px 10px;
29             color: white;
30             font-size: 16px;
31           }
32 
33 
34     </style>
35 </head>
36 <body>
37     <div class="bg-box">
38       <div class="bg">
39 
40            <div class="bg-content">
41           <p>我是bg的后代元素，我不想我的前景有任何透明!怎么辦?</p>
42         </div>
43 
44       </div>
45     </div>
46 
47 
48 </body>
49 </html>

----------------

2) 使用 rgba . rgba 定義的透明度不會被繼承;

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>rgba</title>
 6 
 7     <style type="text/css">
 8 
 9           .bg-box {
10              width: 200px;
11              height: 200px;
12              border: 1px solid #ccc;
13              background: red;
14              position: relative;
15           }
16           .bg-content {
17              width: 100%;
18              height: 100px;
19              position: absolute;
20              bottom: 0;
21              left: 0;
22              background: rgba(0, 0, 0,0.5);
23           }
24           .bg-content p{
25              padding: 5px 10px;
26              color: white;
27              font-size: 16px;
28           }
29 
30 
31     </style>
32 </head>
33 <body>
34 
35     <div class="bg-box">
36        <div class="bg-content">
37           <p>我是bg的后代元素，我不想我的前景有任何透明!怎么辦?</p>
38         </div>
39     </div>
40 
41 </body>
42 </html>

-------------------------------------------------

定義的一個兼容的 rgba 類:

.rgba {
  background: rgb(0,0,0); /*The Fallback color,這里也可以使用一張圖片來代替*/
  background: rgba(0, 0, 0,0.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */    
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
 }

css背景顏色屬性值轉換

參考鏈接:

　　CSS3 RGBA　　

　　RGBA與Opacity區別小解

免責聲明！

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

猜您在找 rgba和opacity區別簡單總結下opacity、transparent以及rgba rgba與opacity的區別以及在遮罩層的運用 css中使用rgba和opacity設置透明度的區別 opacity的背景透明&background中rgba的背景色透明小程序opacity無效替代方案 background-color: rgba(0, 0, 0, 0); CSS 中設置透明的方式及區別（opacity，transparent，rgba） audio標簽、HOVER效果、rgba和opacity、隱藏場景給div設置background-color: rgba(0, 0, 0, 0.2)屬性，並加了css3動畫--opacity動畫淡出動畫，之后div子元素的字體會抖一下 RGB以及RGBA