# Полупрозрачность через свойство opacity в CSS

Полупрозрачность элемента можно также задать через свойство `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`.

← →
↑