От автора: приветствуем вас на нашем блоге, посвященном сайтостроению и веб-технологиям. В частности, сегодня мы поговорим о том, как сделать в css полупрозрачный фон и зачем это может быть нужно.
Полупрозрачность в веб-дизайне
В последнее время в сайтостроении активно применяются различные приемы, связанные с прозрачностью. Это позволяет создавать красивые шапки сайтов и множество различных декоративных элементов. Благодаря формату PNG-24 сегодня есть возможность вставлять на веб-страницу полупрозрачные изображения самых разных форм.
А что предусмотрено в самом css для использования полупрозрачных фонов? В последние годы в нем появилась возможность определять цвет текста или заднего плана в цветовом режиме rgba. Если вы работаете в графических редакторах, то наверняка знаете о нем. Цвет в rgba определяется так:
|
1 |
background: rgba(доля красного, доля зеленого, доля синего, прозрачность) |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееПервые три значения записываются числовыми значениями от 0 до 255, где 255 – самая большая доля цвета. Прозрачность определяется по-другому – от 0 до 1. Если записать 0, то эффект будет такой же, как при background: transparent, то есть при полностью прозрачный фон.
Зачем все это нужно
Ну вот представьте, что вы определили для всей веб-страницы или отдельного блока какое-то фоновое изображение. Потом, если вы в этом родительском контейнере создадите новые блоки, то после определения оттенка для них изображение не будет видно на этих участках страницы.
Если же вам нужно, чтобы основной сплошной цвет просвечивался и через него было видно нашу картинку, то для этого и используется цветовой режим rgba. Например, я создам в html-документе два блока с произвольными идентификаторами.
|
1 2 3 4 |
<body> <div id = "ab"></div> <div id = "ct"></div> </body> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#ct{ position: absolute; width: 600px; height: 400px; background: rgb(255, 234, 13) } #ab{ width: 600px; height: 400px; position: absolute; background: url(star.png) } |
Блоки идентичны друг другу во всем, кроме фона. Благодаря абсолютному позиционированию они стоят на одном и том же месте – в верхнем левом углу страницы, но поскольку блок #ct стоит в html-разметке последним, он полностью перекрывает своего товарища и на странице мы увидим просто желтый сплошной фон.
В то же время видим, что у #ab есть какая-то фоновая картинка, но мы ее не увидим, потом что у #ct не полупрозрачный фон и через него ничего не просвечивается. Все потому, что мы задали цвет в режиме rgb, а он не добавляет полупрозрачность, которая нам так нужна в данном случае. Давайте изменим стиль для #ct:
|
1 |
background: rgba(255, 234, 13, 0.5). |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееОбновляем страницу и видим вместо сплошного желтого более тусклый оттенок, а через него видно звездочки, которые и были фоновым изображением нашего блока #ab. Вот это и есть работа режима rgba.
Теперь давайте разбрем другой пример. Удалим один из блоков, а внутри оставшегося создадим дочерний элемент, которому тоже назначим свои стили.
|
1 2 3 4 |
<div id = "ct"> <div class = "block"> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#ct{ width: 600px; height: 400px; background: url(bg.png); padding-top: 100px; } .block{ width: 400px; height: 300px; margin: 0 auto; background: pink; border-radius: 25px; } |
Отцентрируем дочерний элемент, дадим фоновое изображение основному контейнеру и желаемый колер для блока внутри него. Опять же, из-за отсутствия полупрозрачности фон родителя не будет просвечиваться.
Теперь достаточно определить подходящий оттенок, который был бы схож с розовым (pink), только записать его в режиме rgba, добавим последним значением прозрачность. Переопределяем цвет фона для дочернего элемента:
|
1 |
background: rgba(210, 121, 166, 0.28); |
Теперь, если обновить страницу, мы видим, что через цвет в дочернем блоке видно тот красивый орнамент, который задан для общего контейнера.
Где это может пригодиться в сайтостроении?
Хорошо, прием с полупрозрачностью мы с вами разобрали, а где он вообще применяется? Обычно его используют при создании так называемых масок у различных картинок, пунктов меню или товаров.
Наверняка вы видели на некоторых сайтах, как при наведении на элемент, на него как бы накладывался другой фон с каким-то содержимым. Но при этом если цвет этого накладываемого фона задать непрозрачным, то предыдущую картинку мы уже не увидим. Соответственно, это никуда не годится, поэтому используется полупрозрачный цвет, который и задают с помощью rgba.
Другим примером использования может быть тот, что вы могли видеть выше. У основного контейнера была красивая фоновая картинка. Соответственно, чтобы этот орнамент был виден и через фоновый цвет дочерних элементов, его также нужно записать в rgba.
Ну а как сделать полностью прозрачный фон в css? Выше я писал, что для этого можно записать свойство background: transparent, либо же задать 0 в качестве четвертого значения при записи цвета в режиме rgba. Другой прием – записать блоку свойство opacity со значением 0, но тогда весь блок будет прозрачным, то есть невидимым.
Больше информации вы можете узнать из нашего курса по css3, где есть соответствующий урок по полупрозрачности и свойству opacity. Смотрите и изучайте его, чтобы еще лучше разобраться в этих свойствах. На этом я заканчиваю статьи и желаю вам успехов в изучении веб-технологий. Оставайтесь с webformyself, чтобы узнавать еще больше.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Комментарии (1)