Thuộc tính opacity CSS

Định nghĩa và cách sử dụng

Thuộc tính opacity thiết lập mức độ mờ của phần tử.

Xem thêm:

Hướng dẫn CSSĐộ trong suốt hình ảnh CSS

Hướng dẫn CSSMàu CSS

Hướng dẫn HTML DOMThuộc tính opacity

Ví dụ

Đặt mức độ mờ của phần tử div:

div
{
opacity:0.5;
}

Thử ngay

Bạn có thể tìm thêm các ví dụ ở cuối trang này.

Cú pháp CSS

opacity: value|inherit;

Giá trị thuộc tính

Giá trị Mô tả Kiểm tra
value Định nghĩa độ mờ. Từ 0.0 (hoàn toàn trong suốt) đến 1.0 (không trong suốt). Kiểm tra
inherit Nên kế thừa giá trị thuộc tính opacity từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: 1
Kế thừa: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.opacity=0.5

Các ví dụ khác

Thay đổi độ mờ của phần tử
Ví dụ này minh họa cách sử dụng JavaScript để thay đổi độ mờ của phần tử.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0

Ghi chú:IE8 và các phiên bản sớm hơn hỗ trợ thuộc tính filter thay thế. Ví dụ: filter:Alpha(opacity=50).