Задание цвета через rgba на CSS

Кроме формата rgb существует формат rgba, который работает аналогичным образом, но четвертым параметром позволяет задавать полупрозрачность цвету. Этот параметр принимает дробные значения от 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; border: 20px solid red; padding: 10px; font-size: 50px; font-weight: bold; color: rgba(255, 0, 0); /* красный цвет */ }

:

Пример

Добавим теперь полупрозрачность тексту:

<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: rgba(255, 0, 0, 0.5); /* красный полупрозрачный */ }

:

Пример

А теперь сделаем полупрозрачную границу:

<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 rgba(255, 0, 0, 0.5); /* красный полупрозрачный */ padding: 10px; font-size: 50px; font-weight: bold; color: red; }

:

Пример

А теперь сделаем полупрозрачный фон:

<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; background-color: rgba(0, 0, 0, 0.4); /* черный полупрозрачный */ padding: 10px; font-size: 50px; font-weight: bold; color: red; }

:

Практические задачи

Задайте абзацам красный полупрозрачный цвет.

Задайте фону зеленый полупрозрачный цвет.

Задайте границе голубой полупрозрачный цвет.