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ưới

Thành phần trên

Ví dụ thực tế

CSS Property:

opacity:

0.9

0.8

0.7

0.6

0.5

0.4

0.3

0.2

0.1

1

initial

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;
}