Прозрачный фон или текст с помощью CSS

Сегодня в своей практике столкнулся с тем, что для фона меню необходимо было поставить прозрачность. Был вариант конечно сделать это с помощью картинки .png, но все же решил покапать и сделать полупрозрачный фон с помощью CSS. Оказалось это совсем несложным :)

В html-коде прописываем "класс", для которого необходимо установить определенную прозрачность:

<div class="FON"></div>

далее открываем таблицу стилей CSS и вбиваем там свойства для данного "класса":

.FON {
   background: rgba(200, 54, 54, 0.5);
}

тем самым я указал цвет фона, выставив значения для трех основных цветов (красный - r, зеленый - g, синий - b), и прозрачность фона на 50% ( alpha - a) одним свойством.  Значения для цвета указывается в диапазоне от 0 до 255, а для прозрачности диапазон будет от 0.0 до 1.0

Свойство rgba применимо также для всех других элементов. Но если станет необходимым установить прозрачность для всех элементов находящихся в данном классе, то можно воспользоваться свойством opacity, что устанавливает прозрачность для целого элемента или всей страницы. тогда код будет выглядеть так:

.FON {
   opacity: 0.5;
}

В таком случае прозрачными станут все элементы, находящиеся в данном классе, в том числе картинки и текст будут прозрачными.