CSS: Thuộc tính opacity
Thuộc tính 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ị;}
Với các giá trị 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ụ
<div class="opaPr"> <div class="below">Thành phần dưới</div> <div class="above">Thành phần trên</div> </div>
.opaPr {
position: relative;
}
.below {
background: #ccff00;
height: 100px;
width: 100px;
}
.above {
background: #cc0000;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
opacity: 0.6;
}
Thành phần dướiThành phần trên
Ví dụ thực tế
CSS Property:
opacity:
Result:
Thẻ DIV dưới.
Thay đổi giá trị opacity của thẻ myDIV.
CSS Code:
#myDIV
{
background-color:lightblue;
width:200px;
height:100px;
opacity:0.9;
}
{
background-color:lightblue;
width:200px;
height:100px;
opacity:0.9;
}