Định nghĩa và sử dụng
Thuộc tính opacity hiển thị cấp độ trong suốt cho thành phần.
Cấu trúc
tag {
opacity: giá trị;
}
opacity có các giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| opacity | giá trị | opacity: 0.3; | Độ trong suốt của thành phần phụ thuộc vào giá trị. |
| inherit | opacity: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ
HTML viết:
<html> <head></head> <body> <div class="opaPr" <p class="below">Thành phần dưới</p> <p class="above">Thành phần trên</p> </div> </body> </html>
CSS viết:
div.opaPr {
position: relative;
}
p.below {
background: #ccff00;
height: 100px;
width: 100px;
}
p.above {
background: #cc0000;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
}
Hiển thị trình duyệt khi chưa có opacity:
Thành phần dưới
Thành phần trên
Thêm thuộc tính opacity vào trong "thành phần trên":
div.opaPr {
position: relative;
}
p.below {
background: #ccff00;
height: 100px;
width: 100px;
}
p.above {
background: #cc0000;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
opacity: 0.6;
}
Hiển thị trình duyệt khi có opacity:
Thành phần dưới
Thành phần trên
Trình duyệt hỗ trợ
Thuộc tính opacity hỗ trợ trong đa số các trình duyệt.
Đối với trình duyệt IE8 trở xuống, phải sử dụng thuộc tính filter: filter:Alpha(opacity=60).