Два фона и больше | htmlbook.ru
В CSS 2 добавить одновременно два фона к одному элементу нереально, поэтому приходится вкладывать один элемент внутрь другого и для каждого задавать свой собственный фоновый рисунок. Для сложных макетов таких вложений иной раз можно насчитать около десятка. Понятно, что ни к чему хорошему такое нагромождение не приводит, но что делать? Оказывается, есть что! В CSS 3 можно одновременно добавлять несколько фоновых рисунков для любого элемента. Так что берем рисунок блока (рис. 1), режем его на части и начинаем тестировать в браузерах.
Рис. 1. Блок для сайта
Для простоты, ширину блока возьму фиксированного размера, а высота будет тянуться в зависимости от контента. По рисунку хорошо видно верхнюю и нижнюю часть, вырезаю в редакторе и складываю пластами в отдельном файле. Среднюю часть надо выбрать так, чтобы она повторялась без швов по вертикали. Рисунок имеет хорошо выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. Копирую и вставляю к предыдущим фрагментам. В итоге получится такая картинка (рис. 2).
Рис. 2. Подготовленные изображения
В принципе, можно сохранить каждый фрагмент в виде отдельного файла, но у CSS-спрайтов (так называется технология склейки нескольких изображений в одно) есть ряд преимуществ. Во-первых, сокращается количество запросов к серверу из-за сокращения количества файлов и, во-вторых, рисунки в сумме загружаются и отображаются быстрее.
Сам фон выводится свойством background, оно же задает и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую, и в данном случае имеет значение их порядок. Мне требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставлю их первыми (пример 1).
Пример 1. Несколько фоновых картинок
HTML5CSS2.1CSS3IE 8IE 9CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Три фона</title>
<style type="text/css">
.aztec {
width: 212px; /* Ширина блока с учетом padding */
min-height: 300px; /* Минимальная высота */
background:
url( images/aztec_block.png) 0 0 no-repeat,
url(images/aztec_block.png) -576px 100% no-repeat,
url(images/aztec_block.png) -288px 0 repeat-y;
padding: 38px; /* Поля вокруг текста с учетом границы */
}
</style>
</head>
<body>
<div>
<p>Уицилопочтли — «колдун колибри», бог войны и солнца.</p>
<p>Тескатлипока — «дымящееся зеркало», главный бог ацтеков.</p>
<p>Обоим богам приносили человеческие жертвы.</p>
</div>
</body>
</html> Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы.
Проверяем в браузерах. Internet Explorer 8 вообще не вывел никаких рисунков, остальные браузеры (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) отобразили рамку корректно (рис. 3).
Рис. 3. Вид рамки в браузере Safari
С использованием множественных фонов ситуация для разработчиков существенно облегчается, особенно при верстке блоков. Остается только одна мелочь. Надо чтобы браузер IE 6–8 прекратил свое существование.
Несколько фоновых картинок | WebReference
К одному элементу можно добавить сразу несколько фоновых изображений через единственное свойство background. Это позволяет обойтись одним элементом для создания сложного фона или одной картинкой, выводя её несколько раз с различными настройками. Все изображения со своими параметрами перечисляются через запятую, при этом вначале указывается картинка которая выводится поверх остальных изображений, а последней, соответственно, самая нижняя картинка. В примере 1 показано создание фона с тремя изображениями.
Пример 1. Три фона
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон</title>
<style>
body {
background: url(/example/image/animate-bg3.png) 90% 90% no-repeat fixed,
url(/example/image/animate-bg2.png) 40% 40% no-repeat fixed,
url(/example/image/animate-bg1.jpg) no-repeat fixed;
background-size: auto, auto, cover; /* Меняем масштаб */
}
</style>
</head>
<body></body>
</html> Если требуется отдельно задать какое-то стилевое свойство для фона, вроде background-size как в примере выше, то параметры для каждого фона перечисляются через запятую. Результат данного примера показан на рис. 1.
Рис. 1. Фон с тремя изображениями
Отдельные изображения для фона позволяют менять их положение, а также анимировать, как показано в примере 2.
Пример 2. Анимированный фон
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Фон</title> <style> body { background: url(/example/image/animate-bg3.png) 90% 90% no-repeat fixed, url(/example/image/animate-bg2.png) 40% 40% no-repeat fixed, url(/example/image/animate-bg1.jpg) no-repeat fixed; background-size: auto, auto, cover; animation: ball 40s linear infinite; } @keyframes ball { from { background-position: 3000px 90%, 180% 40%, 0 0; } to { background-position: -2000px 90%, -300px 20%, 0 0; } } </style> </head> <body></body> </html>
Живой пример
Подробнее про анимацию рассказывается далее.
Рассмотрим теперь как применять одну картинку для создания блока с рамкой (рис. 2). Ширина блока фиксированная, а высота тянется в зависимости от объёма содержимого блока.
Рис. 2. Рисованная рамка
На рисунке хорошо заметна верхняя и нижняя часть, которую требуется вырезать в графическом редакторе и расположить по горизонтали. Средняя часть выбирается таким образом, чтобы она повторялась без швов по вертикали. Картинка имеет выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. В итоге получится такое подготовленное изображение (рис. 3). Клетчатое поле обозначает прозрачность, оно позволяет задавать наряду с изображениями цветной фон и легко менять его через стили.
Рис. 3. Подготовленное для фона изображение
Сам фон выводится свойством background, оно же задаёт и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую и в данном случае имеет значение их порядок. Нам требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставим их первыми (пример 3). Цвет фона указывается последним.
Пример 3. Несколько фоновых картинок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон</title>
<style>
.aztec {
width: 212px; /* Ширина блока с учётом padding */
min-height: 240px; /* Минимальная высота */
background:
url(/example/image/aztec-bg.png) 0 0 no-repeat,
url(/example/image/aztec-bg.png) -576px 100% no-repeat,
url(/example/image/aztec-bg.png) -288px 0 repeat-y,
#f3dbb3;
padding: 38px; /* Поля вокруг текста с учётом границы */
}
</style>
</head>
<body>
<div>
<p>Уицилопочтли — «колдун колибри», бог войны и солнца.</p>
<p>Тескатлипока — «дымящееся зеркало», главный бог ацтеков.</p>
<p>Обоим богам приносили человеческие жертвы.</p>
</div>
</body>
</html>Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы. Последним идёт цвет, который виден в прозрачной центральной части блока (рис. 4).
Рис. 4. Вид рамки
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
Как добавить два фона к одному элементу через CSS3?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ |
Задача
Добавить два фоновых изображения для блока с помощью CSS3.
Решение
Современные браузеры позволяют добавлять к элементу произвольное число фоновых изображений, перечисляя параметры каждого фона через запятую. Достаточно воспользоваться универсальным свойством background и указать для него вначале один фон и через запятую второй.
Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали. На рис. 1 показана фоновая картинка, которая будет выводиться по левому краю, а на рис. 2 картинка для вывода по правому краю.
Рис. 1. Фоновая картинка для границы слева
Рис. 2. Фоновая картинка для границы справа
В качестве блочного элемента к которому добавляется фон, обычно используется тег <div> в силу его удобства и универсальности, чтобы выделить его среди остальных элементов, к нему добавляется класс block (пример 1).
Пример 1. Два фоновых изображения
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Два фоновых изображения</title>
<style>
body {
background: #f2f0e3; /* Цвет фона веб-страницы */
}
.block {
background: url(images/bg_left.gif) repeat-y,
#fff url(images/bg_right.gif) repeat-y 100% 0;
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>
За 11 месяцев вахты радисты провели 8642 сеансов связи общим
объемом 300625 групп. Это только метео и аэротелеграммы.
Принято от радиостанции мыс Челюскин 7450 групп.
</div>
</body>
</html> Результат данного примера показан на рис. 3.
Рис. 3. Вид блока с двумя фоновыми картинками
Обои на рабочий стол и картинки для заставки на фон рабочего стола
Обои для рабочего стола на 7Fon
7Fon — это сервис, который поможет вам легко найти красивые обои на фон рабочего стола. Мы собрали здесь более 140 тыс. картинок со всего интернета, каждую мы тщательно проверяем перед добавлением на сайт. Ежедневно на нашем ресурсе появляется более сотни новых обоев. А если мы находим более качественную копию картинки, то мы заменяем её. Все это гарантирует заставки превосходного качества.
Удобство выбора обоев
Изюминкой нашего сайта является быстрая и удобная интеллектуальная система поиска картинок.
Около 70-ти категорий обоев упрощают выбор темы заставки. Перейдя в раздел, вы сможете выбрать обои по размеру, что позволит скачать картинки на рабочий стол в нужном для вас разрешении.
Поиск картинок по цвету — уникальная функция на 7Fon. Для поиска фотографий определенного цвета, кликните по цветному кругу в поисковой стоке вверху страницы. Далее, при помощи удобной палитры выберите нужный оттенок и нажмите «Искать». В результате наш умный алгоритм автоматически подберет обои, в которых этот цвет преобладает. Обязательно воспользуйтесь этим инструментом — мы старались 🙂
И разумеется, есть текстовый поиск заставки на рабочий стол. Каждой картинке мы присваиваем теги, что облегчает поиск. Кстати, мы реализовали его на 7-и языках, в том числе на украинском и русском. Введите в поисковое поле то, что должно быть изображено на картинке, язык автоматически определится.
Выбор размера заставки и редактирование
На страничке картинки, есть десятки разрешений самых популярных мониторов. Вы можете скачать обои в оригинальном размере или выбрать нужный перед загрузкой. Используя рамку кадрирования изображение можно предварительно обрезать.
Еще одна наша фишка, это редактирование фотографии с помощью онлайн-редактора. Слева от кнопки «Скачать», расположена кнопка с палитрой, именно там скрывается этот монстр. По своим возможностям он очень схож с фотошопом — фантазии будет где разгуляться!
Обои на телефон
Воспользовавшись QR-кодом, вы можете скачать обои на телефон. Это очень удобно, ведь найдя картинку с компьютера, а потом отсканировав QR-код, можно мгновенно загрузить её на смартфон или планшет для заставки на домашнем экране.
Уверены, 7Fon станет для вас незаменимым, когда вы решите скачать обои на рабочий стол!
Как добавить два фоновых изображения к одному элементу?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Кроссбраузерно добавить два фоновых изображения для блока.
Решение
Фоновые картинки достаточно активно используются для создания блоков, поскольку с их помощью формируется самый причудливый дизайн. В частности, можно добавлять к элементу декоративные уголки, вертикальные и горизонтальные линии, а также многое другое.
Кроссбраузерно (т.е. для всех браузеров, включая старые версии) нельзя добавить два фона к одному элементу, поэтому приходится идти на хитрость и вкладывать один элемент внутрь другого. При этом для каждого вложенного элемента создаётся своя фоновая картинка, за счёт наложения блоков и рождается эффект, что элемент один, и он содержит несколько фоновых изображений. Здесь важно не добавлять отступы к внешним элементам, иначе эффект будет потерян.
Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали. На рис. 1 показано фоновая картика, которая будет применяться для первого элемента, она будет формировать границу слева, а на рис. 2 фон для вложенного элемента, который добавляет границу справа.
Рис. 1. Фоновая картинка для границы слева
Рис. 2. Фоновая картинка для границы справа
В качестве блочного элемента к которому добавляется фон, обычно используется тег <div> в силу его удобства и универсальности. Фоновое изображение устанавливается через стилевое свойство background, как показано в примере 1.
Пример 1. Два фоновых изображения
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Два фоновых изображения</title>
<style>
body {
background: #f2f0e3; /* Цвет фона веб-страницы */
}
.block {
background: #fff url(images/bg_left.gif) repeat-y; /* Цвет фона блока,
путь к фону с границей слева,
повторение по вертикали */
}
.block div {
background: url(images/bg_right.gif) repeat-y 100% 0; /* Путь к фону с границей справа,
повторение по вертикали,
расположение фона по
правому краю блока */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>
<div>
За 11 месяцев вахты радисты провели 8642 сеансов связи общим
объемом 300625 групп. Это только метео и аэротелеграммы.
Принято от радиостанции мыс Челюскин 7450 групп.
</div>
</div>
</body>
</html>Результат данного примера показан на рис. 3.
Рис. 3. Вид блока с двумя фоновыми картинками
В данном примере, чтобы фон добавлялся только к нужному тегу <div>, а не ко всем подобным элементам на странице, используется класс с именем block, к которому и применяются все стилевые свойства. Чтобы задать стиль только для вложенного <div> в примере указывается контекстный селектор (конструкция .block div), он определяет стиль только для тега <div>, расположенного внутри <div>.
фон — Толковый словарь Ожегова
1.
ФОН1, а, м.
1. Основной цвет, тон, на к-ром пишется картина, рисуется, изображается что-н. Светлый ф. Яркая вышивка по белому фону.
2. Задний план картины, а также вообще задний план чего-н., то, на чём что-н. видится, выделяется. Корабли на фоне вечернего неба. Фигура на фоне деревьев.
3. перен. Общие условия, обстановка, в к-рой что-н. происходит, окружение (книжн.). Общий ф. событий.
• На фоне кого-чего, в знач. предлога с род. п. в окружении кого-чего-н., при сопутствующих условиях. Отдельные недостатки на фоне общих успехов.
| прил. фоновый, ая, ое (к 1 и 2 знач.).
2.
ФОН2, а, м. (спец.). Единица уровня громкости звука.
Источник: Толковый словарь Ожегова и Шведовой на Gufo.me
Значения в других словарях
- фон — 1. фон/¹ (основной цвет, тон). 2. фон/² (шум, един. громкости). Морфемно-орфографический словарь
- Фон — Внесистемная единица уровня громкости. Словарь мер и весов
- фон — фон I м. 1. Основной цвет, тон, по которому сделан рисунок, нанесён узор и т.п. 2. Задний план картины, способствующий выделению главных элементов композиции. || Задний план, на котором выделяется что-либо. 3. перен. Толковый словарь Ефремовой
- фон — I. фона, м. [фр. fond]. 1. Основной цвет, тон, на к-ром пишется картина. || Задний план картины. 2. перен. Общая основа, на к-рой выделяется кто-что-н., обстановка, окружение, где происходит какое-н. событие, протекает какое-н. явление (книжн.). II. Большой словарь иностранных слов
- фон — Программирование backdrop фоновая плоскость Самая удаленная от наблюдателя плоскость, которая становится видимой, когда все остальные плоскости изображения отсутствуют или сделаны прозрачными. Словарь компьютерных терминов
- фон — I см. >> дворянин II см. >> поле Словарь синонимов Абрамова
- фон — 1) -а, м. 1. Основной цвет, тон, по которому сделан рисунок, узор и т. п. — Сестре ее прислали материйку: — фон голубой и через полоску все глазки и лапки, глазки и лапки. Гоголь, Мертвые души. [Райский] снял холстину с портрета Марфеньки и зажег свечу. Малый академический словарь
- фон — Заимств. в XIX в. из франц. яз., где fond «основание» < лат. fondus — тж. См. фонд. Этимологический словарь Шанского
- ФОН — (от греч. phone — звук), ед. уровня громкости звука (см. ГРОМКОСТЬ ЗВУКА). Уровень громкости данного звука в Ф. равен уровню интенсивности звука (звукового давления) в децибелах для чистого тона частотой 1000 Гц, громкость к-рого при сравнении на слух равна громкости данного звука. Физический энциклопедический словарь
- фон — Фон-барон (разг. шутил.) — надменный, спесивый, слишком заважничавший человек. ► Ты что за фон-барон, что тебе и слова сказать нельзя? Фразеологический словарь Волковой
- фон — I I: он из фо́нов «благородного происхождения», ходи́ть фо́ном. От нов.-в.-н. vоn – перед дворянскими фамилиями. II II. Через нем. Fond «фон, задний план» (XVIII в.; см. Шульц I, 222) из франц. fond «основание, дно» от лат. fundus. Этимологический словарь Макса Фасмера
- фон — сущ., кол-во синонимов: 26 атмосфера 17 воздух 14 гамма-фон 1 гильоши 2 грунт 12 задний план 2 задник 6 земля 106 климат 19 микроклимат 9 обстановка 31 окружение 39 ореол 13 план 67 поле 76 помехи 2 радиопомеха 3 рирпроекция 2 среда 33 тангир 2 тон 28 узор 36 условия 30 хромакей 2 цвет 266 шум 96 Словарь синонимов русского языка
- Фон — I (франц. fond, от лат. fundus – дно, основание) 1) основной цвет, тон, на котором пишется картина. 2) Задний пространственный план картины. 3) В переносном значении – среда, окружение, в которых происходит что-либо. Большая советская энциклопедия
- фон — орф. фон1, -а фон2, -а, р. мн. -ов, счетн. ф. фон (ед. измер.) фон3, частица — с последующей фамилией пишется раздельно, напр.: фон Бисмарк, фон Бюлов, фон Караян Орфографический словарь Лопатина
- ФОН — (от греч. phone — голос, звук) — единица субъективной шкалы громкости звуков. Для тона 1000 Гц эта единица численно равна уровню звукового давления. Для остальных частот громкость звуков в фонах определяется методом субъективного сравнения. Большой психологический словарь
- ФОН — В филат. цветной фон, наносимый на бумагу перед печатанием марок для улучшения их внешнего вида. В ряде случаев Ф. предназначен для защиты марок от фальсификации. Такой Ф. бывает видимым, состоящим из различных сетчатых рис. Филателистический словарь
- ФОН — ФОН — единица уровня громкости звука. Для чистого тона фон совпадает с децибелом. ФОН (от греч. phone — звук, голос) — часть сложных слов, указывающая на отношение их к голосу, звуку (напр., телефон). ФОН (франц. fond, от лат. Большой энциклопедический словарь
- фон — ФОН, фона, ·муж. (·франц. fond). 1. Основной цвет, тон, на котором пишется картина. Светлый фон. Мрачный фон картины. | Задний план картины. Фигура женщины на фоне деревьев. 2. перен. Толковый словарь Ушакова
- фон — сущ., м., употр. часто (нет) чего? фона, чему? фону, (вижу) что? фон, чем? фоном, о чём? о фоне; мн. что? фоны, (нет) чего? фонов, чему? фонам, (вижу) что? фоны, чем? фонами, о чём? о фонах… Толковый словарь Дмитриева
- фон — (фр. fond основание) в лингвистике текста: обстановка, среда, окружение, в которых происходит действие, изображенное в художественном или публицистическом стиле. Словарь лингвистических терминов Жеребило
- фон — ФОН а, м. ФОНД а, м. fond m. 1. Фон. Основной цвет, тон, по которому сделан рисунок, узор и т. п. БАС-1. — Сестре ее прислали материйку .. Фон голубой и через полоску все глазки и лапки, глазки и лапки. Гоголь Мертв. души. Словарь галлицизмов русского языка
- фон — Поверхность, прилегающая непосредственно к объекту различения, на которой он рассматривается. Фон считается: светлым — при коэффициенте отражения поверхности более 0,4; средним — при коэффициенте отражения поверхности от 0,2 до 0,4; темным — при коэффициенте отражения поверхности менее 0,2. [119] Строительная терминология
- фон — Фон, фоны, фона, фонов, фону, фонам, фон, фоны, фоном, фонами, фоне, фонах Грамматический словарь Зализняка
- фон — ФОН 1. ФОН, -а; м. [франц. fond] 1. Основной цвет, тон, по которому сделан рисунок, узор и т.п. Купили ситец — на красном фоне мелкие цветочки. Вывязать белый узор на синем фоне. 2. Задний план картины, рисунка и т.п. Толковый словарь Кузнецова
- фон — 1. ФОН, частица впереди прозвания немецких дворян. Он из фонов. || Укорно: человек чванный, принимающий важный вид. Ходит фоном, важничать, барониться. Что она, фон-мон или шлюх-плюх? спрашивала одна барыня о роде-племени другой. 2. ФОН франц. Толковый словарь Даля
- ФОН — • факультет общественных наук Сокращения, применяемые в СССР
- фон — фон , -а Орфографический словарь. Одно Н или два?
- фон — ФОН, -а, м. Посторонний шум; что-л. второстепенное, мешающее главному; посторонние разговоры, отвлекающие от дела. Это так, для фона. Толковый словарь русского арго
- фон — (иноск.) — общая обстановка, характер явления, (собств.) общий цвет картины, по которому написан узор Ср. Весь безграничный, темный фон, расстилавшийся перед его воображением, покрылся густыми толпами летавших запятых. Ант. П. Чехов. Восклицательный знак. Фразеологический словарь Михельсона
