Thuộc tính opacity

Thuộc tính opacity thiết lập độ trong suốt cho phần tử. Nếu một phần tử được thiết lập độ trong suốt - điều đó có nghĩa là các phần tử nằm bên dưới nó sẽ hiển thị xuyên qua nó.

Thuộc tính nhận giá trị là một số thập phân từ 0 đến 1. Trong đó, giá trị 0 - là độ trong suốt hoàn toàn, và giá trị 1 - là độ mờ hoàn toàn. Các giá trị trung gian, ví dụ 0.3, thiết lập độ trong suốt một phần. Giá trị mặc định: 1.

Cú pháp

bộ chọn {
	opacity: số từ 0 đến 1;
}

Ví dụ

Trong ví dụ này, một khối được thêm độ trong suốt một phần và nền của phần tử cha hiển thị xuyên qua đường viền và văn bản của khối đó:

<div id="parent">
	<div id="elem">
		Lorem ipsum dolor sit amet.
	</div>
</div>

#parent {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	padding: 30px;
}
#elem {
	width: 300px;
	height: 200px;
	border: 20px solid red;
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: red;
	background: black;
	opacity: 0.7;
}