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

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

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

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

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

Результат: