# Задание цвета через 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; }`

:

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

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

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

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

← →
↑