Как сделать несколько фоновых изображений с помощью CSS?
Как можно сделать, например, три фоновых рисунка, чтоб кусок был внизу (не повторялся), в середине (чтоб удлинялся в зависимости от размера контента) и сверху, статичное фоновое изображение. Верстка DIV-ами.
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 10 окт 2011 в 14:55
3 3 3 бронзовых знака
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Предлагаю три дива вложенных сделать (здесь 50px — высота фоновых картинок верха и низа)
#content < height: auto; min-height: 300px; >#bg1 < padding-top: 50px; background: transparent url('/images/bg-top.png') left top no-repeat; >#bg2 < padding-bottom: 50px; background: transparent url('/images/bg-bottom.png') right bottom no-repeat; >#content < background: #ffffff url('/images/bg-middle.png') center center repeat; > content Отслеживать
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака
ответ дан 10 окт 2011 в 15:05
14.3k 1 1 золотой знак 21 21 серебряный знак 35 35 бронзовых знаков
Как-то так. Ну и закрепить хоть фиксировано, хоть %. Вроде ничего сложного и должно работать.
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
ответ дан 10 окт 2011 в 15:01
12.4k 1 1 золотой знак 20 20 серебряных знаков 43 43 бронзовых знака
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как использовать несколько фоновых изображений с помощью CSS
CSS3 позволяет добавлять несколько фоновых изображений для одного элемента, используя список значений через запятые, чтобы указать необходимое количество фонов.
Список значений background-position и/или background-repeat, которые разделены через запятые, задают положение и повторение соответственно для нескольких фоновых изображений:
div < background-image:url(image1), url(image2), url(image3); background-position:center right, right bottom, center top; background-repeat:no-repeat, repeat-y, repeat-x; >В данном примере image1 имеет положение center-right и не повторяется, image2 имеет положение right bottom и повторяется по вертикали, а image3 имеет положение center top и повторяется по горизонтали.
Это один из способов установления нескольких изображений. Можно установить изображение с помощью свойства background-image, потом указать положение изображения с помощью свойства background-position и указать повторение изображений с помощью свойства background-repeat.
Второй способ добавления нескольких изображений это использование свойства background:
div < background: url("image1") no-repeat center bottom, url("image2") no-repeat center top , blue; >При применении свойства background-color для нескольких фоновых изображений цвет применяется в конце перед всеми фоновыми изображениями. Как видите в вышеприведенном пример, синий цвет указывается в конце.
Давайте узнаем, как можно пошагово создать несколько фоновых изображений с помощью CSS!
- Выберите три изображения. Они должны иметь небольшой размер, чтобы вы смогли увидеть, как работают свойства background-position и background-repeat.
- Создайте простой HTML документ с элементом .
- Примените стиль к элементу и не забудьте задать для него ширину и высоту.
А сейчас увидим результат!
Пример
html> html> head> title>Заголовок документа title> style> .example < width: 100%; height: 500px; background: url("http://www.cliparthut.com/clip-arts/26/vista-aero-pack2-transparent-png-icon-download-free-vector-clipart-M3rZlU.png") no-repeat 10% 110%, url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png") no-repeat 120% 700% , #002054; > style> head> body> div class="example"> div> body> html>Рассмотрим другой пример:
Пример
html> html> head> title>Заголовок документа title> style> #example< margin:0; padding:0; position: absolute; top: 0; left:0; bottom: 0; width: 100%; height: 70%; background-image: url("https://userscontent2.emaze.com/images/d56242ef-c20d-4350-9877-321cb4523328/7c5cdc4d9f6bf00f3fb279f51d7d23fc.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/239518/birds2.svg"), url("http://www.transparentpng.com/thumb/clouds/W5czgG-blue-clouds-png-icon.png"), linear-gradient(to bottom, rgba(255,255,255,0), 40%,rgba(255,255,255,1) 60%); background-size: 20%, 20%, 100%, 100%, 50px; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x,repeat; background-position: 5% 40%, 95% 60%, center bottom; > > style> head> body> div id="example"> div> body> html>Как задать несколько фоновых изображений css
Фоновые рисунки довольно часто применяются в вёрстке сайтов и оформлении элементов из-за своих широких возможностей по настройке. Вместе с тем правило, что для каждого элемента может быть только один фон порождало сложные вложенные конструкции, цель которых лишь в добавлении пустых элементов с фоновым рисунком. Гораздо проще использовать один элемент и установить для него необходимое количество фоновых изображений, перечисляя их через запятую.
Давайте рассмотрим пример, когда на веб-странице используется два вертикальных фона. Раньше для этой задачи фоновый рисунок добавлялся к селектору body и html , при этом ещё и надо установить высоту страницы 100%. Теперь гораздо проще, добавляем фоновые рисунки только к селектору body , как показано в примере 1.
Пример 1. Фон на веб-странице
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Веб-страница с двумя фоновыми картинками
Двойной фон не обязательно использовать исключительно с изображениями, это можно сделать и с градиентами. Разумеется, эффект будет заметен только при прозрачном или полупрозрачном цвете. В примере 2 применяется функция linear-gradient . Первый фон располагается под углом 45º и состоит из прозрачной и полупрозрачной зелёной полосы. Второй фон содержит те же самые цвета, но располагается под углом -45º. За счёт наложения одного фона на другой по центру веб-страницы появляется цепочка повёрнутых квадратиков.
Несколько фоновых картинок
К одному элементу можно добавить сразу несколько фоновых изображений через единственное свойство background . Это позволяет обойтись одним элементом для создания сложного фона или одной картинкой, выводя её несколько раз с различными настройками. Все изображения со своими параметрами перечисляются через запятую, при этом вначале указывается картинка которая выводится поверх остальных изображений, а последней, соответственно, самая нижняя картинка. В примере 1 показано создание фона с тремя изображениями.
Пример 1. Три фона
Если требуется отдельно задать какое-то стилевое свойство для фона, вроде background-size как в примере выше, то параметры для каждого фона перечисляются через запятую. Результат данного примера показан на рис. 1.
Рис. 1. Фон с тремя изображениями
Отдельные изображения для фона позволяют менять их положение, а также анимировать, как показано в примере 2.
Пример 2. Анимированный фон
Подробнее про анимацию рассказывается далее.
Рассмотрим теперь как применять одну картинку для создания блока с рамкой (рис. 2). Ширина блока фиксированная, а высота тянется в зависимости от объёма содержимого блока.
Рис. 2. Рисованная рамка
На рисунке хорошо заметна верхняя и нижняя часть, которую требуется вырезать в графическом редакторе и расположить по горизонтали. Средняя часть выбирается таким образом, чтобы она повторялась без швов по вертикали. Картинка имеет выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. В итоге получится такое подготовленное изображение (рис. 3). Клетчатое поле обозначает прозрачность, оно позволяет задавать наряду с изображениями цветной фон и легко менять его через стили.
Рис. 3. Подготовленное для фона изображение
Сам фон выводится свойством background , оно же задаёт и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую и в данном случае имеет значение их порядок. Нам требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставим их первыми (пример 3). Цвет фона указывается последним.
Пример 3. Несколько фоновых картинок
Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы. Последним идёт цвет, который виден в прозрачной центральной части блока (рис. 4).
Как использовать несколько фоновых изображений с помощью CSS
CSS3 позволяет добавлять несколько фоновых изображений для одного элемента, используя список значений через запятые, чтобы указать необходимое количество фонов.
Список значений background-position и/или background-repeat, которые разделены через запятые, задают положение и повторение соответственно для нескольких фоновых изображений:
В данном примере image1 имеет положение center-right и не повторяется, image2 имеет положение right bottom и повторяется по вертикали, а image3 имеет положение center top и повторяется по горизонтали.
Это один из способов установления нескольких изображений. Можно установить изображение с помощью свойства background-image, потом указать положение изображения с помощью свойства background-position и указать повторение изображений с помощью свойства background-repeat.
Второй способ добавления нескольких изображений это использование свойства background:
При применении свойства background-color для нескольких фоновых изображений цвет применяется в конце перед всеми фоновыми изображениями. Как видите в вышеприведенном пример, синий цвет указывается в конце.
Давайте узнаем, как можно пошагово создать несколько фоновых изображений с помощью CSS!
Множественные фоны в CSS3.
Всем привет! В этой небольшой статье мы с вами разберём, как задать несколько фоновых изображений на CSS3.
HTML у нас снова такой же
И простые стили, чтобы увидеть наш блок, в который затем вставим изображения
В background-image мы указываем путь к картинке, в background-repeat — повторять или не повторять картинку, а в background-position мы указываем позицию картинки в блоке: первое значение по горизонтали, второе по вертикали. Значения так же можно задавать в px.
При использовании изображения, вы также можете использовать цвет. Тогда место, где нет картинки, будет заполнено выбранным вами цветом.
Ещё одно полезное свойство background-attachment, которое позволяет зафиксировать фон в одной позиции независимо от того, как двигается блок.
background-size позволяет изменять размер картинки.
background-size: 50px 200px;
Первое значение по горизонтали, второе по вертикали.
Также данное свойство может иметь текстовые значения: contain и cover. Установив первое значение, картинка отмасштабируется таким образом, чтобы она содержалась полностью в нашем блоке, а при втором значении картинка заполнит весь контейнер, и, если места не хватит, то будет обрезана.
Итак, мы разобрали все основы фоновых изображений и теперь поговорим про множественные фоны.
В CSS3 появилась возможность задавать несколько фонов одному блоку. Чтобы это сделать, просто перечислите в background-image второе изображение через запятую
background-image: url(img1.png), url(img2.png);
Все наши остальные стили, такие как background-repeat и т.д. будут применены ко всем изображениям. Чтобы задать свои стили для каждого фона, их также нужно перечислить через запятую. Тогда первое значение будет относиться к первому фону, а второе — ко второму.
background-repeat: no-repeat, repeat;
background-position: left bottom, right center;
Так же обратите внимание на то, что первая картинка в background-image будет отображаться выше второй, вторая выше третей и т.д.
В конце следует сказать, что все эти свойства можно объединять в одно свойство background.
background: url(img1.png) left bottom no-repeat, url(img2.png) right center repeat;
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 3 ):
Я так понял, что на сайте новый редактор?
Все замечательно, но методологически правильно было бы показать примеры страниц. Объем у них маленький, много места не займут, но люди сразу увидять, о чем речь.
Спасибо за замечание! Оно обязательно будет учтено.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Похожие публикации:
- Как поставить текст снизу css
- Как при наведении на картинку заменить ее на другую картинку css
- Как прижать кнопку к низу блока css
- Как проверить node js
image — set ( )
Позволяет установить несколько разрешений и типов фонового изображения.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 27 марта 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
CSS-функция image — set ( ) позволяет перечислить несколько фоновых изображений с условиями, по которым браузер решит, какое из них наиболее подходящее для загрузки в данный момент.
Похож по принципу работы на тег .
Пример
Скопировать ссылку «Пример» Скопировано
div background-image: image-set( url("puppy@1x.webp") type("image/webp") 1x, url("puppy@2x.webp") type("image/webp") 2x, url("puppy@1x.png") type("image/png") 1x, url("puppy@2x.png") type("image/png") 2x );>div background-image: image-set( url("puppy@1x.webp") type("image/webp") 1x, url("puppy@2x.webp") type("image/webp") 2x, url("puppy@1x.png") type("image/png") 1x, url("puppy@2x.png") type("image/png") 2x ); >
Как понять
Скопировать ссылку «Как понять» Скопировано
На сайт могут заходить с разных устройств. У многих дисплеи с повышенной плотностью пикселей и им нужно показывать картинку хорошего качества. А на телефонах лучше показывать небольшие файлы ради ускорения загрузки страницы. Нужно как-то давать разным клиентам разные версии изображений. Раньше для этого использовали медиавыражения, а теперь есть простые и удобные решения, которые позволяют через запятую указать все версии изображений. Конечно, есть тег , но если изображение декоративное, будет правильнее установить его как фон элемента.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Внутри круглых скобок указываем через запятую две и более ссылки на изображения при помощи функции url ( ) и пишем условие для выбора этой картинки.
В качестве условия можно использовать коэффициент плотности пикселей: 1x , 2x и так далее. Или указываем тип изображения в формате MIME. Картинка будет загружена, если формат поддерживается браузером. Можно комбинировать условия.
Поддержка
Скопировать ссылку «Поддержка» Скопировано
Firefox поддерживает свойство полностью. Поддержку в остальных браузерах можно уточнить на Can I use.
Особенности поддержки в Chrome и Safari в данный момент:
- отображение ломается при указании типов изображений в формате MIME, например type ( «image / webp» ) ;
- работает только с вендорным префиксом -webkit — ;
- в Safari не отображается AVIF.
Таким образом для полной поддержки код можно писать так:
div /* Фолбэк */ background-image: url("puppy.png"); /* Для Chrome и Safari */ background-image: -webkit-image-set( url("puppy@2x.png") 2x, url("puppy@1x.png") 1x ); /* Для Firefox */ background-image: image-set( url("puppy@2x.avif") type("image/avif") 2x, url("puppy@1x.avif") type("image/avif") 1x, url("puppy@2x.webp") type("image/webp") 2x, url("puppy@1x.webp") type("image/webp") 1x, url("puppy@2x.png") 2x, url("puppy@1x.png") 1x );>div /* Фолбэк */ background-image: url("puppy.png"); /* Для Chrome и Safari */ background-image: -webkit-image-set( url("puppy@2x.png") 2x, url("puppy@1x.png") 1x ); /* Для Firefox */ background-image: image-set( url("puppy@2x.avif") type("image/avif") 2x, url("puppy@1x.avif") type("image/avif") 1x, url("puppy@2x.webp") type("image/webp") 2x, url("puppy@1x.webp") type("image/webp") 1x, url("puppy@2x.png") 2x, url("puppy@1x.png") 1x ); >
Проверить поддержку на данный момент вы можете в демке.