От автора: приветствую вас на страницах блога webformyself. Сегодня я хотел бы вам рассказать, как можно сделать прозрачный фон. Css реализует такой прием очень легко, причем есть несколько вариантов, как это сделать.
Прозрачность в сайтостроении
Для начала стоит для себя уяснить, что цвет может быть полностью прозрачным (по сути, невидимым) и полупрозрачным. Это когда его немного видно, а через него могут быть видны другие элементы веб-страницы.
Как реализуется
Собственно, есть два основных варианта, как сделать прозрачный фон. Первый:
|
1 |
background: transparent; |
Нужному элементу задаем такое правило и все будет работать. Второй вариант:
|
1 |
background: rgba(0, 0, 0, 0); |
Цветовой режим rgba является усовершенствованной версией rgb, только тут указывается еще и прозрачность, которую можно задавать в значениях от 1 до 0, где 0 – полностью прозрачный цвет. Таким образом, rgba является отличной возможностью для задания полупрозрачного фона.
Зачем все это нужно?
Казалось бы, а почему цвет не установить как белый, и тогда его и так не будет видно? Да, но тут важно помнить, что по дизайну все сайты разные.
Если фоновый цвет всей страницы или отдельных крупных структурных блоков отличен от белого, то такой метод уже не подходит.
По умолчанию у блочного элемента при его создания нет явного фона, он полностью прозрачный. Убедиться в этом легко – создайте на пустой странице блок, определите ему какие-то размеры (ширину и высоту), больше ничего не задавайте. Увидите ли вы что-то на странице? Нет.
Полупрозрачность
Наверняка эта возможность интересует вас намного больше, потому что она позволяет добиваться интересных эффектов. Во-первых, таким образом можно добиться нужных оттенков, более мягких и приглушенных. Например, если записать в качестве цвета что-то вроде этого:
|
1 |
background: rgb(255, 234, 13) |
То получим достаточно яркий желтый цвет, что в целом в веб-дизайне не всегда приветствуется. Но если записать уже так:
|
1 |
background: rgba(255, 234, 13, 0.5) |
Мы указали полупрозрачность, так что он стал намного более тусклым.
Также, если два полупрозрачных цвета накладываются друг на друга, то их свойства как бы складываются и в том месте где они наложились друг на друга, цвет немного отличается от изначального.
Прозрачный фон может пригодится там, где вы даже не думали. Например, стандартный способ создания треугольника через css заключается в том, чтобы блоку задать нулевую ширину и высоту, после чего указать с трех сторон прозрачные рамки, а с одной стороны выбрать такой цвет, который вам нужен. В итоге получаем треугольник.
В целом, это все что я хотел сказать вам сегодня об этом приеме. Дополнительные сведения о прозрачности вы можете найти в курсе по css3, а я на этом заканчиваю статью.
