Как сделать двойной фон css

CSS Multiple Backgrounds

В этой главе вы узнаете, как добавить несколько фоновых изображений в один элемент.

Вы также узнаете о следующих свойствах:

CSS несколько фонов

Различные фоновые изображения разделяются запятыми, и изображения укладываются поверх друг друга, где первое изображение ближе всего к зрителю.

В следующем примере имеется два фоновых изображения, первое изображение — цветок (выровненный по нижнему и правому краю), а второе изображение представляет собой бумажный фон (выровненный по левому верхнему углу):

Пример

Несколько фоновых изображений могут быть указаны с помощью отдельных свойств фона (как указано выше) или background Сокращенное свойство.

В следующем примере используется сокращенное свойство background (тот же результат, что и в примере выше):

Пример

Размер фона CSS

Свойство CSS background-size позволяет задать размер фоновых изображений.

Размер может быть указан в длинах, процентах или с помощью одного из двух ключевых слов: содержать или охватывать.

В следующем примере размер фонового изображения значительно меньше исходного изображения (с использованием пикселов):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

Ключевое слово contain масштабирует фоновое изображение так, чтобы оно было максимально большим (но и его ширина, и его высота должны уместиться внутри области содержимого). Таким образом, в зависимости от пропорций фонового изображения и области расположения фона, могут быть некоторые области фона, которые не охватываются фоновым изображением.

Ключевое слово cover масштабирует фоновое изображение таким образом, что область содержимого полностью покрывается фоновым изображением (ширина и высота которого равны или превышают область содержимого). Таким образом, некоторые части фонового изображения могут не отображаться в области фонового позиционирования.

В следующем примере демонстрируется использование contain и cover :

Пример

Определение размеров нескольких фоновых изображений

Свойство background-size также принимает несколько значений для размера фона (с помощью списка с разделителями-запятыми) при работе с несколькими фоновыми рисунками.

В следующем примере задано три фоновых изображения с разным значением размера фона для каждого изображения:

Пример

Полный размер фоновое изображение

Теперь мы хотим иметь фоновое изображение на веб-сайте, который охватывает все окна браузера в любое время.

В следующем примере показано, как это сделать; Используйте элемент HTML (HTML-элемент всегда по крайней мере высота окна браузера). Затем установите фиксированный и центрированный фон на нем. Затем настройте его размер с помощью свойства «размер фона»:

Пример

CSS фон-происхождение свойства

Свойство CSS background-origin указывает, где расположено фоновое изображение.

Свойство принимает три различных значения:

В следующем примере демонстрируется свойство background-origin :

Пример

CSS фон-клип свойство

The CSS background-clip свойство определяет область рисования фона.

Свойство принимает три различных значения:

В следующем пример демонстрируется свойство background-clip :

Источник

Множественные фоны в css3. Основы

Дата публикации: 2018-02-26

От автора: с помощью CSS можно устанавливать множественный фон элементов. С помощью background-color можно залить фон однотонным цветом, с помощью background-image – залить фон изображением. А можно и то и другое.

Ниже показан пример, где я использую в качестве фона SVG изображение, вставленное прямо в CSS через data URL.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Если оставить как есть, image-one.jpg будет повторяться и полностью закроет image-two.jpg. Мы можем контролировать изображения отдельно с помощью других свойств фона.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Видите, как в background-position значения также разделены запятой? Значения применятся отдельно к своему изображению. У background-repeat одно значение? Можно сделать 2 значения таким же путем, но если использовать одно – оно применится к обоим изображениям.

Пример использования 4 отдельных изображений, по одному на каждый угол со сдвигом:

Жаль, что нельзя вращать и переворачивать фоновые изображения, иначе можно было бы использовать одно. Однако мы можем вращать и переворачивать все элементы (и псевдоэлементы). Поэтому в таких случаях мы можем использовать одно изображение!

Стек-порядок для нескольких фоновых изображений – первое всегда сверху

Градиенты применяются через background-image, поэтому их можно использовать с фоновыми изображениями. Например, поверх растрового изображения можно задать прозрачный градиент.

Автор: Chris Coyier

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

Как сделать двойной фон css

Сегодня, практически в каждом дизайне сайта присутствует красивая background картинка.

Каждый верстальщик знает, что самый простой способ создания дизайна – лучшее, что может быть. Одним из простых и удобных техник является растягивание background на весь экран, с помощью нескольких строк css кода.

Казалось бы, мелочь, но все же, порой нужно сотворить что-то сложное простым способом. Например, реализовать несколько background с индивидуальными параметрами, без использования вспомогательных div блоков. То есть, сохраняя семантическую верстку.

В этой статье мы рассмотрим синтаксис кода, который поддерживает несколько background (multiple backgrounds) в одном элементе. Вот, как это смотрится в реалии:

CSS код для multiple backgrounds

Несколько background картинок реализуются с помощью нескольких значений css параметра background, которые разделены комой:

Я пытался сделать так же, с помощью краткого кода. К сожалению, не работает.

Плюс к этому, можно использовать другие свойства background (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Так же, как и в CSS градиентах.

Вот и все! Надеюсь вам понравилась эта техника создания нескольких background, без использования каких либо вспомогательных элементов. Чистый семантический код.

Если у вас остались вопросы, замечания или предложения по поводу данной техники создания multiple backgrounds – пишите в комментарии. Также, хотелось бы провести тест на кроссбраузерность. Просьба, всем кто будет использовать (использует) данную технику, написать в комментарии, как это работает в разных браузерах (которыми вы пользуетесь).

Дальше: Как заработать на блоге? Пошаговая инструкция по заработку на блоге.

Дискуссия по теме 3 Комментария

День добрый! Почему то отображается только один фон. Не знаю что делать.

Sipth 16.03.2015 в 12:15

В CSS 2 добавить одновременно два фона к одному элементу нереально, поэтому приходится вкладывать один элемент внутрь другого и для каждого задавать свой собственный фоновый рисунок. Для сложных макетов таких вложений иной раз можно насчитать около десятка. Понятно, что ни к чему хорошему такое нагромождение не приводит, но что делать? Оказывается, есть что! В CSS 3 можно одновременно добавлять несколько фоновых рисунков для любого элемента. Так что берем рисунок блока (рис. 1), режем его на части и начинаем тестировать в браузерах.

Рис. 1. Блок для сайта

Для простоты, ширину блока возьму фиксированного размера, а высота будет тянуться в зависимости от контента. По рисунку хорошо видно верхнюю и нижнюю часть, вырезаю в редакторе и складываю пластами в отдельном файле. Среднюю часть надо выбрать так, чтобы она повторялась без швов по вертикали. Рисунок имеет хорошо выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. Копирую и вставляю к предыдущим фрагментам. В итоге получится такая картинка (рис.

Можно ли применить несколько цветов фона с помощью CSS3?

Рис. 2. Подготовленные изображения

В принципе, можно сохранить каждый фрагмент в виде отдельного файла, но у CSS-спрайтов (так называется технология склейки нескольких изображений в одно) есть ряд преимуществ. Во-первых, сокращается количество запросов к серверу из-за сокращения количества файлов и, во-вторых, рисунки в сумме загружаются и отображаются быстрее.

Сам фон выводится свойством background, оно же задает и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую, и в данном случае имеет значение их порядок. Мне требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставлю их первыми (пример 1).

Пример 1. Несколько фоновых картинок

HTML5CSS2.1CSS3IE 8IE 9CrOpSaFx

Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы.

Проверяем в браузерах. Internet Explorer 8 вообще не вывел никаких рисунков, остальные браузеры (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) отобразили рамку корректно (рис. 3).

Рис. 3. Вид рамки в браузере Safari

С использованием множественных фонов ситуация для разработчиков существенно облегчается, особенно при верстке блоков. Остается только одна мелочь. Надо чтобы браузер IE 6–8 прекратил свое существование.

Источник

Практика: работаем с фоновыми рисунками

Именно благодаря фоновым изображениям можно создать абсолютно уникальный дизайн веб-страницы, воспроизвести любую задумку. Если вы проходили практику в предыдущей главе, где мы создавали посадочную страницу, то наверняка помните, как преобразовался вид джамботрона, когда вы добавили к нему фотографию в качестве фона. Сегодня мы будем еще больше тренироваться в применении фоновых изображений.

Загрузка файлов и план работы

Итак, сегодня мы будем писать CSS-стили для еще одной веб-страницы. Она будет отчасти похожа на предыдущий лендинг-пейдж, но мы переделаем дизайн и структуру, а также сделаем меню рабочим. Кроме того, мы добавим фотогалерею, позаимствовав ее из прошлого практического урока. Вот как будет выглядеть конечный результат:

План работы следующий:

1. Написание общих стилей

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

добавляем отступы сверху и снизу (поскольку стандартные отступы обнулил файл Reset.css), задаем размер шрифта и выравниваем по центру.

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

Все остальные свойства CSS вы уже видели много раз, поэтому мы думаем, что вы легко поймете, за что они отвечают в данном коде. Что ж, двигаемся дальше!

2. Стилизация секций

CSS для хедера

Разберем свойства по порядку. Первая строка весьма очевидна — мы указываем ширину блока. Во второй строке задан цвет в формате RGBA, который помимо цвета позволяет определять еще и его прозрачность (она записана четвертым параметром и равна 0.5 ). Следующее свойство — position: fixed; — сообщает браузеру, что элемент должен быть прикреплен к определенной точке на экране (которая указана в следующем свойстве) и не менять своего положения при скролле страницы.

Просмотрите результат в браузере. При прокрутке видно, что топбар остается «приклеенным» к верхнему краю окна, а сквозь него видно проходящий контент (за счет полупрозрачного цвета фона).

Переходим к меню. Его пункты нужно расположить горизонтально, а буквы текста — преобразовать в прописные. Также для ссылок потребуется добавить внутренние отступы — во-первых, для того, чтобы визуально разделить их, а во-вторых, чтобы увеличить область кликабельности ссылки для большего удобства.

Обновите веб-страницу. Топбар стал более высоким, но ссылки всё еще кажутся скучноватыми. Добавим немного динамики, дописав стиль для состояния :hover :

Пункты меню стали реагировать на наведение курсора изменением фонового цвета, что, безусловно, оживляет картинку. Теперь приступим к следующему этапу.

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

Последним значением свойства background добавлен цвет фона, который будет виден лишь в случае отсутствия фоновой картинки или при долгой ее загрузке.

мы подготовим особый стиль. Это первое, что видит посетитель при открытии страницы, поэтому шрифт должен быть большим и эффектным:

За заголовком следует большая, заметная кнопка, призывающая к действию. На практике она может вести к покупке билетов на концерт, прослушиванию музыки онлайн и т. п. Добавим для нее стиль:

Мы задали кнопке блочное поведение и разместили по центру, указав автоматические горизонтальные отступы и ограничив ширину. Отступ сверху немного отодвигает кнопку от заголовка, а вертикальные паддинги делают ее более высокой.

CSS для блока Tour

Поскольку фоновые изображения у блоков будут разные, пришло время поработать над ними по отдельности. Каждому блоку присвоен класс с названием города. Используя эти классы, мы зададим соответствующие фоновые рисунки:

Сохраните все изменения и обновите страничку в браузере. Вы увидите, как преобразовались все карточки. Одна проблема — белый текст местами не очень хорошо читается на фоне фотографий. Было бы хорошо немного затемнить их. Современный CSS позволяет это сделать: мы используем свойство background-blend-mode (перейдите по ссылке для подробного ознакомления с ним).

CSS для галереи

Приступим к оформлению галереи. Стиль для блоков с миниатюрами мы позаимствуем из предыдущего урока — в этом они абсолютно идентичны:

Добавим немного отзывчивости нашим графическим ссылкам:

Вновь применим хак для контейнера, содержащего плавающие элементы:

И добавим такую же тень, как у карточек с городами:

Плагин Lightbox для красивого открытия фотографий во всплывающем окне уже подключен — вам не нужно ничего предпринимать. Если вы не проходили предыдущую практику и вам интересно, о каком плагине идет речь, вы можете вернуться на один урок назад, где мы о нем рассказываем более подробно.

CSS для блока подписки

Размеры кнопки также нужно немного подстроить:

Сохраните стили и можете полюбоваться результатом. Нам осталось стилизовать футер.

CSS для футера

Для блока-контейнера социальных кнопок создайте небольшой отступ снизу, а для самих кнопок — горизонтальные внутренние отступы по 5 пикселей:

При наведении курсора на кнопку соцсети она должна менять цвет. Чтобы не отклоняться от общего стиля и ничего не выдумывать, мы возьмем тот же самый цвет, который использовали для пунктов верхнего меню:

Шрифт текста об авторском праве чуть уменьшим:

Сохраните файл стилей и проверьте страницу в браузере. Должно выглядеть круто!

3. Проверка адаптивности

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

Давайте проверим, как отображается наша новая веб-страница при разной ширине вьюпорта. Для большего удобства вы можете воспользоваться режимом имитации девайсов в браузере Google Chrome — удобный инструмент, при котором вы словно просматриваете сайт с iPhone, iPad и т. п.

Первое, что бросается в глаза — последний пункт верхнего меню переносится вниз на экранах шириной менее 480 пикселей. Мы можем немного уменьшить горизонтальные отступы у ссылок для этой категории девайсов, используя медиазапрос @media :

За счет сжатия отступов все пункты теперь помещаются в одну строку даже на девайсах с маленькой шириной экрана в 320 пикселей.

Следующий недочет — карточки с городами. Если ширина экрана менее чем 980 пикселей, блоки начинают некрасиво съезжать во второй ряд по левой стороне. Один из вариантов решения данной проблемы — позволить блокам выстраиваться в несколько рядов, но при этом располагаться по центру. Для реализации этой идеи понадобится отменить несколько стилей, заданных ранее. Заметьте, что мы не будем убирать никакой код, а просто используем еще один медиазапрос, который перезапишет стили, если ширина экрана будет меньше 980 пикселей:

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

Завершение

Поздравляем, вы только что создали еще одну настоящую адаптивную веб-страницу! Вы можете пойти дальше и преобразить ее по своему вкусу. Придумайте и добавьте новые секции, стилизуйте их, используя свои навыки. Кроме этого, можно создать еще несколько веб-страниц и объединить их с помощью ссылок — получится полноценный многостраничный сайт музыкальной группы!

Если в процессе прохождения урока у вас что-то не получилось, не отчаивайтесь — готовый проект, как всегда, включен в архив с файлами, так что вы можете заглянуть в него и разобраться, в чем проблема.

А вот и демо-версия готовой страницы:

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

Источник

2.10. CSS-фон

Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.

Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.

Свойства фона html-элементов

1. Базовый цвет: свойство background-color

Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.

Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.

Свойство не наследуется.

Рис. 1. Свойство background-color для разных элементов

2. Источник изображения: свойство background-image

Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.

Свойство не наследуется.

3. Укладка изображений: свойство background-repeat

Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.

Свойство не наследуется.

Рис. 2. Свойство background-repeat

4. Фиксация изображения: свойство background-attachment

Свойство background-attachment указывает, является ли фоновое изображение фиксированными относительно области просмотра или прокручивается вместе с элементом или его содержимым.

Свойство не наследуется.

5. Позиционирование изображений: свойство background-position

Если для элемента заданы фоновые изображения, свойство background-position указывает их начальное положение (после любого изменения размера) в соответствующей области расположения фона.

Свойство не наследуется.

Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.

Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.

Рис. 3. Свойство background-position

Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:

Рис. 4. Фоновое изображение по низу блока

Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:

Рис. 5. Задание для блока нескольких фоновых изображений

6. Область рисования: свойство background-clip

Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.

Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.

Свойство не наследуется.

Рис. 6. Свойство background-clip

7. Область расположения фона: свойство background-origin

Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).

Свойство не наследуется.

Рис. 7. Свойство background-origin

8. Размер изображений: свойство background-size

Свойство background-size устанавливает размер фоновых изображений.

Свойство не наследуется.

Рис. 8. Свойство background-size

9. Краткая запись свойств фона: свойство background

10. Множественные фоны

Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.

Рис. 9. Пример использования нескольких фоновых изображений

Источник