Thuộc tính opacity

Đị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ợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

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

THÔNG BÁO LỖI