Сделать прозрачный фон с помощью CSS

Разберёмся как же всё-таки сделать прозрачный фон с помощью CSS, какие существуют способы и как избежать прозрачности у дочерних элементов

Прозрачность и полупрозрачность.

Для начала давайте отделим прозрачность от полупрозрачности. Полностью прозрачным элемент можно назвать тогда, когда после применения определенных стилей его не видно в принципе. Полупрозрачным же элемент можно назвать, когда и сам этот элемент виден и то, что располагается за ним (фон, картинка, другой элемент и тп). Для того, чтобы было проще воспринимать текст в статье мы будем использовать лишь термин "прозрачность". Так как у прозрачности есть степени от 0 (полностью прозрачный элемент) до 1 (полностью непрозрачный). А в какую степень вы будете стилизовать ваш объект - это уже ваше право.

Для чего это всё нужно?

Для того, чтобы работать над исчезновением или появлением элемента. Возможно, для того, чтобы было видно что находится позади него (фон, картинка, другой элемент). На самом деле применений этому достаточно большое количество и они сугубо индивидуальны.

Прозрачность в CSS

Как вы успели заметить из названия статьи "Сделать прозрачный фон с помощью CSS" мы будем рассматривать как настраивать прозрачность фона. Но, если подумать, то фоном вашего блока, тела сайта, таблицы и тп может быть как картинка, так и сплошной цвет. Поэтому будет рассматриваться множество различных вариантов организации вашей прозрачности будь то фон блока, картинка или другой элемент на странице.

Прозрачный фон в CSS

See the Pen Прозрачный фон в CSS by pyampa (@pyampa) on CodePen.


В данном примере мы использовали способ задания фона background: rgba(255, 255, 255, 0.5); , так как благодаря этому мы избегаем наложению прозрачности на дочерние элементы, если бы использовали просто opacity; , о котором мы поговорим ниже. Цветовой режим rgba - это усовершенствованная версия режима rgb с однимм лишь отличием. Тут указывается еще и прозрачность, которую можно задавать в значениях от 1 до 0, где 0 – полная прозрачность. Как итог rgba - отличная возможность для задания полупрозрачного фона.

Смотрите также:

Паттерны для сайта


Прозрачная картинка в CSS

See the Pen Полупрозрачная картинка by pyampa (@pyampa) on CodePen.


Как мы видим - картинка посветлела. Это случилось из-за того, что она стала полупрозрачной. Благодаря тому, что мы не указали цвет фона сайта (а по-умолчанию он белый) наша картинка и побледнела. Параметр opacity позволяет выставить уровень прозрачности от 0 до 1. Где 0 - полностью прозрачный элемент, а 1 - полностью непрозрачный.

Прозрачный элемент в CSS

See the Pen Полупрозрачный элемент CSS by pyampa (@pyampa) on CodePen.


В даном случае мы действуем так же, как и с картинкой. Для нашей кнопки мы добавили прозрачности с помощью opacity.


Comments