Фон блока в CSS
У блока может быть различный фон, в том числе, прозрачный. В CSS прозрачный фон установлен по умолчанию. То есть, можно видеть то, что находится за блоком, за исключением мест, занятых контентом. Но есть возможность изменить фон блока. Он может иметь любой цвет. Также фоном может быть картинка. В этой теме мы рассмотрим, как это делается.
Цвет фона блока
Свойство background-color устанавливает цвет фона. В значении указывается цвет одним из способов, существующих в CSS. Кроме того, свойство принимает такие значения:
background-color: transparent — прозрачный фон (по умолчанию)
background-color: inherit — значение принимается от родительского элемента
Значение transparent используется в CSS, когда нужно вернуть прозрачный фон блоку, если ранее он уже был изменён.
Создадим блок, зададим ему размеры и установим цвет фона.
Область заполнения фона
Фон может зополнять разные области блока. Область задаётся с помощью свойства background-clip . Оно принимает такие значения:
background-clip: border-box — весь блок вместе с рамкой (по умолчанию)
background-clip: padding-box — весь блок без рамки
background-clip: content-box — фон заполняет только область содержимого
При значении border-box заполняются только прозрачные части рамки. Если рамка сплошная и непрозрачная, то за ней фон не отображается.
Добавим на страницу блок, зададим ему рамку и внутренние отступы. Установим фон, заполняющий только содержимое блока:
Фон заполняет только контент
Фон в виде картинки
В CSS есть возможность использовать в качестве фона картинку. Для этого есть свойство background-image . Значением этого свойства является путь к файлу картинки. Он указывается так:
background-image: url(«путь к файлу»);
Для примера можно использовать это изображение. Нажмите на него правой кнопкой мыши и сохраните с именем image. Разместите файл в той же папке, где находится страница. Иначе путь к файлу нужно указывать не так, как в примере.
Добавим блок с размерами 400 на 250, чуть меньше, чем изображение. И установим фон в виде картинки:
Не забывайте, что так устанавливается именно фон блока. На нём можно разместить контент.
Размер фоновой картинки
Свойство background-size устанавливает размеры фоновой картинки. Оно определяет не размер фона, а именно размер изображения. Размеры фона зависят от размеров блока. А свойство background-size влияет на картину, которая становится фоном. Значение свойства можно указать в единицах измерения CSS или процентах. Сначала пишется ширина и через пробел высота. Если не соблюсти пропорции ширины и высоты, то изображение искажается.
Также у свойства background-size есть такие значения:
background-size: auto — если указано только это значение, то изображение имеет свои реальные размеры. Если один из размеров задан в единицах измерения, то второму размеру можно указать auto , чтобы у картинки были правильные пропорции.
background-size: cover — картинка заполняет весь фон, сохраняя пропорции.
background-size: contain — вся картинка отображается в фоне.
Значения cover и contain есть также у свойства object-fit . В теме про него эти значения рассмотрены более подробно.
Укажем размер фоновой картинке:
background-size: 480px 280px;
Позиционирование изображения
В прошлом примере виден левый верхний угол изображения. При этом картинка оказалась обрезанной справа и снизу из-за того, что блок меньше изображения. Существует возможность расположить изображение по-другому, чтобы были видны другие части. Для этого используется позиционирование. Его устанавливает свойство background-position . В значении пишутся два слова через пробел.
Первое слово — это горизонтальное позиционирование. Значение может быть left , center или right .
Второе слово — это вертикальное позиционирование. Значение может быть top , center или bottom .
Расположим изображение справа сверху.
background-position: right top;
Повторение изображения
Добавим на страницу ещё один блок и установим фон в виде того же изображения. Но теперь размеры блока будут намного больше размеров картинки. Пока мы не будем ничего менять, чтобы посмотреть, как выглядит блок. Вы увидите, что изображение повторяется для полного заполнения блока. Добавим блоку рамку, чтобы видеть его размеры.
Чтобы изменить повторение изображения, используется свойство background-repeat . Оно принимает такие значения:
background-repeat: repeat — повторяется по горизонтали и по вертикали (по умолчанию)
background-repeat: repeat-x — повторяется только по горизонтали
background-repeat: repeat-y — повторяется только по вертикали
background-repeat: no-repeat — не повторяется
background-repeat: inherit — значение принимается от родительского элемента
Изменим фон блока так, чтобы изображение не повторялось.
background-repeat: no-repeat;
В такой ситуации тоже можно использовать позиционирование изображения. Значением свойства background-position могут быть не только слова, но и два числа в единицах измерения CSS, указанные через пробел. Это отступы изображения от левого верхнего угла блока.
Попробуйте разные способы повторения изображения.
Прокрутка фона
Есть возможность установить, как будет двигаться фон блока при прокрутке страницы, а также при прокрутке самого блока. Это делается с помощью свойства background-attachment . Оно может принимать такие значения:
background-attachment: scroll — фон не движется относительно блока и движется вместе с блоком при прокрутке страницы (по умолчанию)
background-attachment: fixed — фон зафиксирован относительно левого верхнего угла окна браузера
background-attachment: local — фон движется вместе с содержимым при прокрутке блока
Добавим на страницу ещё один блок с фоном в виде изображения. Разместим его в самом начале страницы, то есть этот блок должен находиться выше других. Добавим в него вложенный блок с большой высотой, чтобы появилась прокрутка. Сделаем так, чтобы фон прокручивался вместе с содержимым блока.
Попробуйте установить другие варианты прокрутки фона. Посмотрите, как будет двигаться фон блока.
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2023 © basecourse.ru Все права защищены
Как сделать прозрачный фон на css
Изменение прозрачности фона кажется простой задачей. В CSS есть свойство opacity, которое управляет прозрачностью. Но этот подход работает не всегда. Если нужно разместить, например, текст поверх картинки, то использовать opacity — не лучшее решение.
Давайте разбираться, в чем проблема с вроде бы подходящим свойством CSS и как изменить прозрачность фона картинки , чтобы не испортить внешний вид других частей интерфейса.
Наивный подход — использовать opacity
К вам приходит проджект-менеджер и показывает новый дизайн страницы облачные серверы . В нем есть такие облака. Задача — сделать их полупрозрачными, а сверху добавить текст.
Первая мысль — сделать прозрачный фон CSS с помощью opacity. Выглядит так, будто это оптимальное решение для поставленной задачи. Набросаем простую разметку и посмотрим, что из этого получится.
HTML:
Timeweb Cloud
CSS:
.cloud background-image: url(../images/cloud.png');
opacity: 1;
>Свойство opacity принимает значение от 0 до 1, где 0 — полная прозрачность, а 1 — полная непрозрачность. Можно регулировать отображение с очень высокой точностью. Правда, на глаз разница заметна только при значительном изменении.
Сейчас результат выглядит так:
Выставили непрозрачность, выглядит нормально. Но в дизайне явно указано, что картинка должна быть полупрозрачной. Попробуем изменить значение opacity — например, 0.5 вместо 1. Облака должны стать немного светлее, насыщенность цветов ведь тоже изменится.
Вылезла проблема — вместе с фоновой картинкой начал исчезать текст с названием сервиса cloud.timeweb.com . В дизайне страницы такого нет. Более того, если сделать opacity: 0, то текст вообще исчезнет, как и облака под ним. Значит, это решение не подходит. Осталось разобраться, в чём причина такого поведения.
Объяснение простое. Проблема в том, что непрозрачность автоматически наследуется дочерними элементами. Нет свойства CSS, которое можно использовать для изменения непрозрачности только фонового изображения родителя. Возможно, оно появится когда-нибудь в будущем. Пока же нужны небольшие «костыли».
Мы поняли, что такое применение opacity для решения задачи не подходит. Для изменения прозрачности фонового изображения потребуется другой подход.
Гибкий подход — использовать псевдоэлемент
Чтобы решить задачу, нужно поместить фоновое изображение в дочерний элемент родителя. Это гарантирует, что облака и текст будут каждый на своем слое. А непрозрачность каждого слоя можно контролировать по отдельности. В теории это выглядит как то, что нам нужно для достижения эффекта, который отрисовал дизайнер.
Разметка останется такой же, а стили перепишем:
.cloud position: relative;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
>
.cloud::before <
content: "";
background-image: url('../images/cloud.png');
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.3;
>
.title position: relative;
top: 80px;
right: 50px;
>Элемент .cloud получил свойство position: relative. Это нужно для того, чтобы относительно родителя позиционировать потомков — .cloud::before и .title. Потомки выстраиваются внутри родители с помощью флекса.
Чтобы сделать псевдоэлемент того же размера, что и родитель, необходимо задать ему абсолютное позиционирование. Верхнее, правое, нижнее и левое значения должны быть равны нулю, чтобы :before не схлопывался. У него также должно быть установлено свойство content, иначе он не будет отображаться на странице.
Тексту нужно установить position: relative, чтобы он был поверх наложения и картинки. Если вы не установите position явно, надпись будет скрыта под абсолютно позиционированным псевдоэлементом. Это позволяет добиваться разных интересных эффектов в интерфейсе. Но мы сейчас решаем другую задачу.
Посмотрим на результат. Теперь облака полупрозрачные, а текст — непрозрачный, как того и требует дизайн страницы.
Вместо .cloud::before можно добавить обычный HTML-элемент для фонового изображения CSS — например, ещё один div. Принципиально это ничего не изменит. Но использование псевдоэлементов помогает упростить структуру HTML и не плодить в разметке лишние сущности.
А в чём же гибкость этого подхода?
Мало того, что вы можете сделать из непрозрачного фона прозрачный без влияния на другие части дизайна, так ещё и получаете возможность дополнительно управлять цветом наложения. Для этого достаточно немного изменить стили.
Свойства background-image и background-size перенесём в стили .cloud. В стили .cloud::before добавим background-color: rgba(0,0,0,0.25). Должно получиться так:
.cloud position: relative;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-image: url('../images/cloud.png');
background-size: cover;
>
.cloud::before <
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(256,256,256,0.75)
>RGBA — это три основных цвета (Red, Green, Blue) плюс альфа-канал, который помогает управлять прозрачностью. Значение rgba(256,256,256,0.75) говорит о том, что мы наложили белую плашку с непрозрачностью 25%. Вместо белого можно применить любой другой цвет и получить интересный эффект наложения:
Какой способ выбрать — решайте сами. Если с цветами играть не придётся, то можно обойтись первым вариантом. Хотя кто знает, что в следующий раз придёт от дизайнера.
Заключение
Как мы увидели, свойство opacity всё-таки пригодилось. Правда, использовать его «в лоб» для изменения прозрачности не получится. Выход простой — добавить псевдоэлемент, который решит проблему с наследованием.