Độ mờ thông qua thuộc tính opacity trong CSS

Độ mờ của một phần tử cũng có thể được thiết lập thông qua thuộc tính opacity. Thuộc tính này cũng nhận các giá trị thập phân từ 0 đến 1. Khi đó, độ mờ được áp dụng đồng thời cho toàn bộ phần tử: văn bản, nền và đường viền của nó.

Xem ví dụ:

<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;
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	
	border: 20px solid red;
	background: black;
	color: red;
	
	opacity: 0.7;
}

Giả sử bạn có một hình nền. Hãy đặt hai khối có văn bản, đường viền và nền lên trên nó. Hãy minh họa trên các khối này sự khác biệt giữa độ mờ thông qua opacity và thông qua rgba.