CSSтеги opacity касиети аркылуу жарык өткөрүүчүлүк

Элементтин жарык өткөрүүчүлүгүн opacity касиети аркылуу да белгилөөгө болот. Бул касиет 0дон 1ге чейинки бөлчөк маанилерди кабыл алат. Бул учурда жарык өткөрүүчүлүк элементтин бардык бөлүктөрүнө бир эле учурда таасир этет: анын текстине, фонуна жана чек арасына.

Мисалды караңыз:

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

Сизде арткыр пландагы сүрөт бар деп коёлу. Анын үстүнө текст, чек ара жана фон менен эки блокту жайгаштырыңыз. Бул блоктордо opacity аркылуу жарык өткөрүүчүлүк менен rgba аркылуу жарык өткөрүүчүлүктүн ортосундагы айырмачылыкты көрсөтүңүз.