Thuộc tính độ mờ CSS
Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính opacity
đặt mức độ mờ cho một phần tử.
Mức độ mờ mô tả mức độ trong suốt, trong đó 1 hoàn toàn không trong suốt, 0,5 là khả năng nhìn xuyên qua 50% và 0 là hoàn toàn trong suốt.
Lưu ý: Khi sử dụng thuộc tính opacity
để thêm độ trong suốt cho nền của một phần tử, tất cả các phần tử con của nó cũng trở nên trong suốt. Điều này có thể làm cho văn bản bên trong phần tử hoàn toàn trong suốt khó đọc. Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, thay vào đó hãy sử dụng các giá trị màu RGBA (Xem "Ví dụ khác" bên dưới).
Giá trị mặc định: | 1 |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | vâng, xem các thuộc tính riêng lẻ . Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.opacity="0.5" Hãy thử nó |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Cú pháp CSS
opacity: number |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
number | Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque) | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Thuộc tính opacity bổ sung độ trong suốt cho nền của một phần tử cũng như cho tất cả các phần tử con của nó. Điều này làm cho văn bản bên trong phần tử trong suốt khó đọc:
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
Hãy tự mình thử »Ví dụ
Để không áp dụng độ mờ cho các phần tử con (như trong ví dụ trên), thay vào đó hãy sử dụng các giá trị màu RGBA . Ví dụ sau đây đặt độ mờ cho màu nền, nhưng không đặt cho văn bản:
div.first {
background: rgba(76, 175, 80, 0.1);
}
div.second {
background: rgba(76, 175, 80, 0.3);
}
div.third {
background: rgba(76, 175, 80,
0.6);
}
Hãy tự mình thử »Mẹo: Tìm hiểu thêm về Màu RGBA trong Màu CSS RGBA .
Ví dụ
Cách sử dụng JavaScript để thay đổi độ mờ cho một phần tử:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Độ mờ / Độ trong suốt của CSS
Hướng dẫn CSS: Màu CSS RGBA
Tham chiếu DOM HTML: thuộc tính độ mờ