Thuộc tính opacity CSS

Posted on by mtoplistChuyên mục:Top List

Sử dụng thuộc tính opacity trong CSS để thiết lập hiệu ứng trong suốt, độ mờ đục cho các phần tử HTML

Độ 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):



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


ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB






Đăng ký nhận bài viết mới


	
	

				

					

					

					

			mtoplist