Thuộc tính opacity CSS

Độ trong suốt với thuộc tính css opacity

Thuộc tính opacity được dùng để điều khiển độ trong suốt của một phần tử. Bạn có thể thiết lập nó hoàn toàn trong suốt (giá trị 0.0 - không nhìn thấy), hoàn toàn đục (giá trị 1.0, là giá trị mặc định), còn khi opacity có giá trị trong khoảng (0.0 - 1.0) thì nằm giữa trong suốt và hoàn toàn đục, nền phía sau phần tử sẽ được nhìn thấy.

Cú pháp:

opacity: number;

Ví dụ, thiết lập độ trong suốt của phần tử trong CSS

---

opacity: độ đục

Hiệu ứng trong suốt

---

Mã CSS (copy và sử dụng):

Ví dụ:

 <style>
    #img1 {
        opacity: 1;
        width: 250px;
        height:auto;
        background: black;
        margin: 10px;
    }
    #img2 {
        opacity: 0.5;
        width: 250px;
        height:auto;
        background: black;
        margin: 10px;

    }
    #img3 {
        opacity: 0.25;
        width: 250px;
        height:auto;
        background: black;
        margin: 10px;

    }
</style>

<img src="https://xuanthulab.net/public/img/logo.png" id="img1" />
<img src="https://xuanthulab.net/public/img/logo.png" id="img2" />
<img src="https://xuanthulab.net/public/img/logo.png" id="img3" />

Ví dụ 2: Độ mờ của phần tử thay đổi khi di chuột

Trong ví dụ này, độ đục của phần tử ban đầu là 0.5, nếu chuột di chuyển trên nó độc đục là 1.0. Để thay đổi mềm mại kết hợp với thuộc tính transition, để quá trình thay đổi giá trị opacity thay đổi dần trong khoảng 0.8s

<style>
    .myopacity-trans {
        opacity: 0.3;
        transition: opacity 0.8s;
        width: 300px;
        background-color: red;
        color: yellow;
    }
    .myopacity-trans:hover {
        opacity: 1;
    }
</style>

<div class="myopacity-trans">
    <img src="https://xuanthulab.net/public/img/logo.png" />
    <p>Để chuột lên</p>
</div>

Để chuột lên

Lưu ý khi sử dụng thuộc tính css opacity

Khi một phần tử thiết lập có độc đục opacity giá trị khác 1, thì tất cả ccs phần tử con của nó có cùng độ đục opacity như vậy, không có cách nào thiết lập độ đục khác đi cho phần tử con.

Khi một phần tử thiết lập có độc đục opacity giá trị khác 1, thì phần tử này tạo ra một ngữ cảnh xếp chồng - các phần tử con của nó nằm trong một hệ thống xếp thứ tự riêng (z-index). Xem thêm về thuộc tính z-index để biết chi tiết