Cách chỉnh độ trong suốt cho một phần tử HTML - 26

Cách chỉnh độ trong suốt cho một phần tử HTML – 26

1) Độ trong suốt của phần tử là gì !?

– Độ trong suốt của phần tử có thể tạm hiểu là khả năng mà chúng ta có thể nhìn “xuyên” qua phần tử đó.

– Độ trong suốt của phần tử càng lớn thì ta càng nhìn rõ được nội dung nằm ở bên dưới nó.

2) Cách chỉnh độ trong suốt cho một phần tử HTML

– Để chỉnh độ trong suốt cho một phần tử thì chúng ta cần phải thiết lập thuộc tính opacity cho phần tử đó với cú pháp như sau: opacity: value;

– Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:

number: Chỉ định độ trong suốt của phần tử dựa theo một số cụ thể, số này nằm trong đoạn từ 0 đến 1 (số càng nhỏ thì độ trong suốt sẽ càng lớn)
initial: Sử dụng giá trị mặc định của nó (mặc định thì thuộc tính opacity có giá trị là 1).
inherit: Kế thừa giá trị thuộc tính opacity từ phần tử cha của nó.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
           margin-top:-180px;
           margin-left:190px;
           width:400px;
           height:250px;
           background-color:black;
           opacity:0.59;
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2020/01/banner1.png" style="width:400px">
    <div id="test"></div>
</body>
</html>

3) Cách chỉnh độ trong suốt cho phần tử bằng giá trị RGBA()

– Thông thường, khi chúng ta thiết lập thuộc tính opacity cho một phần tử thì mặc định các phần tử con nằm bên trong phần tử đó sẽ bị ảnh hưởng bởi độ trong suốt của nó.

Ví dụ:

– Phần tử #test bên dưới được thiết lập thuộc tính opacity với giá trị 0.3 (bên trong nó có phần tử con là một tấm hình, tấm hình này không được thiết lập thuộc tính opacity nhưng vẫn có độ trong suốt vì bị ảnh hưởng bởi độ trong suốt từ phần tử cha của nó là #test)

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
           padding:50px;
           background-color:black;
           opacity:0.3;
        }
    </style>
</head>
<body>  
    <div id="test">
        <img src="https://dsmart.vn/wp-content/uploads/2020/04/BUY2SELL-VIETNAM.jpg" style="width:400px">
    </div>
</body>
</html>

– Khi gặp phải những trường hợp giống ví dụ phía trên, nếu các bạn không muốn phần tử con bị ảnh hưởng bởi độ trong suốt từ phần tử cha của nó, thì thay vì thiết lập thuộc tính opacity, chúng ta còn một giải pháp khác đó chính là gán giá trị rgba() cho thuộc tính background-color của phần tử mà mình muốn chỉnh độ trong suốt.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
           padding:30px;
           background-color:black;
           opacity:0.3;
        }
        #b{
           padding:30px;
           background-color:rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>

    <p>- Phần tử #a được thiết lập độ trong suốt bằng thuộc tính opacity.</p>
    <p>=&gt; nó gây ảnh hưởng đến các phần tử con của nó.</p>

    <div id="a">
        <img src="https://dsmart.vn/wp-content/uploads/2020/01/banner1.png" style="height:150px">
    </div>

    <p>- Phần tử #b được thiết lập độ trong suốt bằng việc sử dụng giá trị rgba()</p>
    <p>=&gt; nó không gây ảnh hưởng đến các phần tử con của nó.</p>

    <div id="b">
        <img src="https://dsmart.vn/wp-content/uploads/2020/01/banner1.png" style="height:150px">
    </div>

</body>
</html>