Hướng dẫn và ví dụ CSS Opacity

CSS Opacity
RGBA

1. CSS Opacity

CSS Opacity được sử dụng để thiết lập độ mờ (opacity) cho một phần tử. Nó chấp nhận một giá trị số từ 0 đến 1. Một số trình duyệt cũng chấp nhận một giá trị phần trăm ( % ) tuy nhiên không phải tất cả.

CSS {opacity: 1} là độ mờ mặc định của một phần tử, giá trị này cho phép bạn nhìn thấy phần tử một cách rõ ràng nhất. CSS {opacity:0} sẽ làm cho phần tử trở thành trong suốt (transparent).

opacity: <alpha-value>;

/* Example: */

opacity: 1.0;
opacity: 0.5;
opacity: 0;

Độ mờ (Opacity) khi được áp dụng cho một phần tử nó sẽ có tác dụng với tất cả các nội dung của phần tử, bao gồm cả các phần tử con. Không có sự thừa kế về độ mờ, và bạn có thể thiết lập một giá trị CSS Opacity khác cho phần tử con, nhưng phần tử con vẫn bị ảnh hưởng bởi độ mờ của phần tử cha.

opacity-example.css

#parent  {
   border: 1px solid blue;
   padding: 5px;
   background:lightblue;
}
.child {
   display: inline-block;
   background: lightgreen;
   padding: 5px;
   margin: 10px;
   height: 50px;
   width: 150px;
}
.option {
   border: 1px solid #eee;
   padding: 5px;
   margin: 10px 0px;
}

opacity-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Opacity</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="opacity-example.css" />
    <script>
        function changeOpa(event)  {
           var opacityValue = event.target.value;
           var parentElement = document.getElementById("parent");
           parentElement.style.opacity = opacityValue;
        }
    </script>
</head>
<body>
    <h3>CSS Opacity</h3>
    <p style="color:blue;">Set Opacity for parent element:</p>
    <div class="option">
        <input type="radio" name="opa" onclick="changeOpa(event)" value="1" checked/> Opacity: 1 <br/>
        <input type="radio" name="opa" onclick="changeOpa(event)" value="0.5"/> Opacity: 0.5 <br/>
        <input type="radio" name="opa" onclick="changeOpa(event)" value="0"/> Opacity: 0
    </div>
    <div id="parent">
        I am a parent element <br/>
        <div class="child">
            I am a child element. <br/>
            {opacity: 1}
        </div>
        <div class="child" style="opacity: 0.5">
            I am a child element. <br/>
            {opacity: 0.5}
        </div>
        <br/>
        ...
    </div>
</body>
</html>

Ví dụ, thay đổi độ mờ cho một ảnh (Image) khi con trỏ ở trên (over) ảnh.

opacity-hover-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Opacity</title>
    <meta charset="UTF-8"/>
    <style>
       .my-image {
          margin: 5px;
       }
       .my-image:hover {
           opacity: 0.5;
       }
    </style>
</head>
<body>
    <h3>CSS Opacity</h3>
    <p style="color:blue;">Move the cursor over Image</p>
    <img class="my-image" src="../images/flower.png" />
</body>
</html>

2. RGBA

Sử dụng hàm RGBA giúp bạn tạo ra một mầu bằng sự kết hợp của 4 giá trị Red, Green, Blue, Alpha. Trong đó Red, Green, Blue là các số nguyên (integer) nhận các giá trị từ 0-255. Alpha đại diện cho độ mờ (opacity), nó nhận giá trị từ 0-1.

rgba(76, 175, 80, 0.1)

rgba(76, 175, 80, 0.15)

rgba(76, 175, 80, 1)

Mầu được tạo ra bởi RGBA có độ mờ, bạn có thể sử dụng mầu này làm mầu nền (background color) cho một phần tử. Độ mờ này chỉ có tác dụng với nền (background) của phần tử, nó không ảnh hưởng tới nội dung của phần tử và các phần tử con.

Hướng dẫn và ví dụ CSS Colors

grba-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Transparent Box</title>
    <meta charset="UTF-8"/>
    <style>
       div {
         padding: 5px;
       }
    </style>
</head>
<body>
    <h3>Transparent Box</h3>
    <p style="color:blue;">With opacity:</p>
    <div style="background-color: rgba(76, 175, 80); opacity:0.1;">
        {opacity:0.1}
    </div>
    <div style="background-color: rgba(76, 175, 80); opacity:0.3;">
        {opacity:0.3}
    </div>
    <div style="background-color: rgba(76, 175, 80);opacity:0.6;">
        {opacity:0.6}
    </div>
    <div style="background-color: rgba(76, 175, 80);">
        {opacity:1.0}
    </div>
    <p style="color:blue;">With RGBA color values:</p>
    <div style="background-color: rgba(76, 175, 80, 0.1);">
         {background-color: rgba(76, 175, 80, 0.1);}
    </div>
    <div style="background-color: rgba(76, 175, 80, 0.3);">
         {background-color: rgba(76, 175, 80, 0.3);}
    </div>
    <div style="background-color: rgba(76, 175, 80, 0.6);">
         {background-color: rgba(76, 175, 80, 0.6);}
    </div>
    <div style="background-color: rgba(76, 175, 80);">
        {background-color: rgba(76, 175, 80);}
    </div>
</body>
</html>

Ví dụ, tạo một hộp gần như trong suốt chứa nội dung văn bản mô tả của một ảnh.

grba-example2.html

<!DOCTYPE html>
<html>
<head>
    <title>Transparent Box</title>
    <meta charset="UTF-8"/>
    <style>
       .img-container {
          display: inline-block;
          position: relative;
       }
       .img-desc {
          position: absolute;
          left: 5px;
          right: 5px;
          bottom: 15px;
          padding: 5px;
          text-align: center;
          background-color: rgba(76, 175, 80, 0.3);
          color: white;
       }
    </style>
</head>
<body>
    <h3>Transparent Box</h3>
    <div class = "img-container">
       <img src="../images/image.png" width="320" height="178"/>
       <div class="img-desc">
          This is an Image
       </div>
    </div>
</body>
</html>

Hướng dẫn và ví dụ CSS Opacity

1. CSS Opacity

2. RGBA

Các hướng dẫn CSS

Các hướng dẫn CSS