Thuộc tính opacity trong CSS3

Định nghĩa và sử dụng opacity

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ị.
opacity	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).