background | htmlbook.ru
| CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
| 3 | 9.0+ | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ | |
Краткая информация
| Значение по умолчанию | transparent || none || repeat || scroll || 0% 0% |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-background |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона.
Значения
могут идти в любом порядке, браузер сам определит, какое из них соответствует
нужному свойству. Для подробного ознакомления смотрите
информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Синтаксис
| CSS2.1 | background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit |
| CSS3 | background: [<фон>, ]* <последний_фон> |
Здесь:
<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit
<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.
Пример 1
XHTML 1.0CSS2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>background</title> <style type="text/css"> div { height: 200px; /* Высота блока */ width: 200px; /* Ширина блока */ overflow: auto; /* Добавляем полосы прокрутки */ padding-left: 15px; /* Отступ от текста слева */ background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, путь к фоновому изображению и повторение фона по вертикали */ } </style> </head> <body> <div> Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat. </div> </body> </html>
Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
Пример 2
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background</title>
<style>
body {
background: url(images/hand.png) repeat-y,
#fc0 url(images/bg-right.
png) repeat-y 100% 0;
}
</style>
</head>
<body>
</body>
</html>
Объектная модель
[window.]document.getElementById(«elementID»).style.background
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Свойство CSS Background — Темы масштабирования
Обзор
Свойство CSS background используется для определения и управления фоном элемента. Это сокращенное свойство, которое позволяет указать различные стили фона элемента, такие как цвет, размер, изображение, происхождение и повторение.
Существует множество сценариев, когда мы хотим добавить изображение к фону нашего элемента или цвет/градиент фона к нашему элементу.
Допустим, у вас есть два HTML-элемента div и вы хотите добавить к ним фоновое изображение или градиент.
Вывод нашего приведенного выше кода выглядит как приведенный ниже пример, где первый элемент содержит изображение на фоне, а второй элемент включает градиент красного и синего цветов.
Это единственные 3 свойства, которые используются в приведенном выше примере, но сокращенное свойство background состоит из восьми других подсвойств:
- background-attachment
- фон-клип
- цвет фона
- фоновое изображение
- фон-происхождение
- фоновая позиция
- повтор фона
- размер фона
У вас есть свобода использовать их как одно свойство, но фоновое сокращение дает вам возможность использовать их одновременно, и вы даже можете оставить свойства, которые вы не хотите использовать.
Синтаксис
Основной синтаксис свойства background заключается в том, что оно принимает все значения в одном свойстве, но мы можем изменить его в соответствии с нашими потребностями.
Таким образом, мы можем легко избежать других значений, не указывая их, когда нам нужны размер и цвет. То же самое мы можем сделать с комбинацией всех других подсвойств.
Когда мы хотим добавить желтый цвет к фону контейнера, мы можем сделать это следующим образом:
Вышеприведенный код только добавляет желтый цвет к фону контейнера.
И это одна из самых простых вещей, которые мы можем сделать с помощью свойства фона.
Допустим, у вас есть изображение с высотой и шириной 50 пикселей, а размер вашего контейнера составляет 500 пикселей в высоту и ширину, и вы не хотите повторять изображение внутри контейнера.
На изображении ниже видно, что изображение не повторяется в контейнере.
Но что, если мы хотим, чтобы изображение повторялось по оси X? Затем вам нужно заменить no-repeat на Repeat-x.
Теперь вы можете видеть, что изображение повторяется по оси x.
Девиз приведенных выше примеров — доказать, что вы можете гибко использовать фоновую стенографию в соответствии с вашими потребностями. Например, вы можете использовать цвет с изображением или изображение с размером.
Ниже приведены примеры изменения свойства фона:
Фон в CSS
Свойство Фон CSS используется для определения различных стилей фона элемента.
Составные свойства
Фон CSS — это сокращение, которое принимает значения 8 составляющих свойств. Теперь поговорим о каждом из них подробно с примерами.
1. background-attachment :
Свойство background-attachment определяет присоединение фонового изображения к его контейнеру или области просмотра. Это свойство позволяет нам контролировать содержимое и поведение изображения при прокрутке страницы.
Требуется три значения
Лучший способ объяснить свойство background-attachment — это демонстрация.
Приведенные выше три значения свойства background-attachment создают эффект, который вы видите на изображении ниже.
Вы можете видеть, что первое значение — это прокрутка, которая является поведением свойства background-attachment по умолчанию. Второе значение является фиксированным, что означает, что фоновое изображение будет зафиксировано на своем месте.
И третье значение — локальное, которое используется для фиксирования изображения относительно содержимого элемента, что означает, что если у фона есть механизм прокрутки, то фоновое изображение будет прокручиваться вместе с содержимым элемента.
2. background-clip :
Свойство background-clip устанавливает фон элемента независимо от того, распространяется ли он на рамку, отступы или содержимое. Требуется три значения padding-box, content-box и border-box.
Определяет, расширяет ли изображение поле содержимого или нет, то же самое с другими значениями.
- border-box :
это значение свойства background-clip по умолчанию, означающее, что фон простирается до краев элемента. - padding-box :
это значение обрезает фоновое изображение по отступу и не допускает экстента до границы. - content-box :
это значение обрезает фоновое изображение только до края блока содержимого.
В приведенном ниже коде указаны все три значения:
Вы можете увидеть результат выполнения приведенного выше кода на изображении ниже, где у нас есть три контейнера с фоновым изображением.
Значение background-clip первого контейнера — это border-box, которое является значением свойства по умолчанию, поскольку это изображение простирается до края элемента.
Второе значение — padding-box, что означает, что фоновое изображение распространяется только на пространство заполнения и не доходит до границы; вы можете видеть это на изображении ниже.
Третье значение — поле содержимого, которое указывает фоновому изображению оставаться под полем содержимого и не доходить до границы элемента.
3. background-color :
Свойство background-color используется для установки цвета фона элемента. Он поддерживает все значения цвета, такие как шестнадцатеричный код, значения RGB, RGB, HSL и HSLA.
Допустим, мы хотим добавить зеленый цвет к фону нашего элемента.
Вы можете увидеть зеленый цвет фона контейнера на изображении ниже.
Даже мы можем использовать значения RGBA, шестнадцатеричный код и значения HSL вместо названия цвета.
4. background-image :
Свойство CSS background-image используется для установки изображений или градиентов фона элемента. По умолчанию он помещается в верхний левый угол контейнера.
С помощью CSS можно включить два типа изображений: обычное изображение или градиент.
Изображение :
Вы можете легко добавить обычное изображение на фон элемента. С помощью синтаксиса URL() мы можем легко добавить фоновое изображение.
Обратите внимание на повторяющееся изображение в приведенном ниже примере.
Если вам нужно более двух изображений, вы можете сделать это, добавив больше url() с помощью запятой (,).
Первое изображение размещается поверх второго изображения, и ко всем изображениям применяется одно и то же правило.
Градиент :
Мы также можем использовать свойство background-image для добавления любого градиента к фону элемента.
Вы можете увидеть вывод вышеприведенного кода в приведенном ниже примере.
5. background-origin :
Это свойство позволяет нам установить происхождение нашего изображения в блочной модели CSS. он принимает три значения: border-box, content-box и padding-box.
Работает так же, как свойство background-clip, но основное отличие состоит в том, что background-clip обрезает изображение, чтобы оно поместилось внутри блока, а background-origin вставляет содержимое внутрь блока, чтобы оно поместилось.
6. background-position :
Это свойство позволяет нам перемещать изображения или градиенты по оси X или оси Y относительно их контейнера. Это свойство принимает значения в процентах и длине.
Вы также можете использовать ключевые слова, такие как верх и низ, что соответствует положительному или отрицательному по оси Y, и левому, правому, что равняется положительному или отрицательному по оси X.
Центр значения ключевого слова центрирует изображение.
7. background-repeat :
Свойство background-repeat используется для определения того, повторяется или нет фоновое изображение вдоль горизонтальной и вертикальной осей.
У вас есть такие значения, как повтор, повтор-x, повтор-y и повтор-и. Значение повтора означает, что фоновое изображение повторяется по обеим осям. repat-y означает, что фоновое изображение повторяется только по оси Y.
repat-x означает, что фоновое изображение повторяется только по оси x. И отсутствие повторения говорит о том, что изображение не повторяется.
Вывод приведенного выше кода выглядит так, как показано на рисунке ниже.
8. Background-size :
Это свойство используется для определения background-size , которое является наиболее важным и запутанным свойством, поскольку оно имеет множество вариаций в различных вариантах использования. Он поддерживает ключевые слова, такие как обложка и содержит. С другой стороны, он также поддерживает значения длины.
Оба значения ключевого слова:
Обложка:
это означает, что фоновое изображение всегда должно покрывать весь контейнер, даже если изображение нужно растянуть или обрезать.
Содержит :
это означает, что изображение всегда отображается целиком, без его растягивания или даже если остается пустое место.
Он также поддерживает значения длины с синтаксисом с одним значением и синтаксисом с двумя значениями.
Указание одного значения, например 100 пикселей, применяется как к высоте, так и к ширине, а когда мы указываем два значения, первое значение всегда применяется к ширине, а второе значение — к высоте.
Примеры
Настройка фона с помощью цвета Ключевые слова
Настройка цвета фона довольно проста, и вам просто нужно использовать свойство фона CSS с указанным значением цвета (это может быть имя цвета, шестнадцатеричный код, RGB или hsla). Он поддерживает все значения цвета.
Допустим, у нас есть HTML-элемент div, и мы хотим применить золотой цвет к его фону.
Когда приведенный выше код применяется к элементу div, он выглядит так, как показано на рисунке ниже.
Установка фона с изображениями
Существует множество сценариев, когда мы хотим добавить фоновое изображение к нашему элементу, и именно здесь пригодится свойство background, поскольку оно также принимает значения изображения.:max_bytes(150000):strip_icc()/html-background-example-15e4a8f1a6724b3ca187b2bcc19650e8.jpg)
Для добавления фонового изображения необходимо использовать синтаксис URL и изображение.
Приведенный выше код добавляет изображение собаки в наш контейнер, и это выглядит как пример ниже.
Установка нескольких фонов
В спецификацию CSS3 добавлена поддержка нескольких фонов, наложенных друг на друга. Свойство background имеет один или несколько слоев фона. Чтобы добавить несколько фонов, вы должны использовать список изображений или градиентов, разделенных запятыми.
Когда мы добавляем несколько фонов с помощью списка, разделенного запятыми, первое значение — это верхний слой, второе значение — второй слой, а цвет фона всегда — последний слой.
В приведенном выше коде мы добавляем два фоновых изображения с помощью одного свойства фона, доказывая, что мы можем легко добавить несколько фонов в свойство фона CSS.
Первое изображение всегда размещается на верхнем слое, а второе — на втором; это относится ко всем изображениям.
Это связано с тем, что по умолчанию второе изображение повторяется, а первое изображение не повторяется. И вы видите, что первое изображение сложено со вторым изображением.
Проблемы доступности
Браузеры не предоставляют вспомогательным технологиям никакой конкретной информации о фоновых изображениях. Это особенно важно для программ чтения с экрана, так как программа чтения с экрана не объявляет о своем присутствии и ничего не сообщает своим пользователям. Если изображение содержит информацию, важную для понимания общей цели страницы, более разумно описать ее семантически в документе.
Поддержка браузера
Вам не нужно беспокоиться о свойстве фона CSS, поскольку оно поддерживает все современные браузеры, такие как:
- Гугл Хром,
- Internet Explorer,
- Фаерфокс,
- Опера и
- Сафари.
Заключение
- Свойство фона CSS является сокращением для следующих свойств:
- фоновая клипса,
- цвет фона,
- фоновое изображение,
- фон-происхождение,
- фоновая позиция,
- повтор фона,
- размер фона и
- background-attachment.
- фоновое свойство принимает все восемь свойств, и мы можем сделать множество вариаций его синтаксиса.
- С помощью свойства background мы можем создать несколько фонов для HTML-элемента.
Добавление фонового изображения в ваши формы
Хотите знать, как добавлять фоновые изображения в ваши формы? С помощью CSS можно легко оформить форму с помощью изображения или цветового градиента в качестве фона!
Из этого туториала вы узнаете, как добавить фоновое изображение в форму.
В этой статье
- 1. Выбор фонового изображения
- 2. Выбор формы
- 3. Добавление фонового изображения в форму
1. Выбор Фоновое изображение
Чтобы начать работу, вам нужно выбрать изображение, которое будет использоваться в качестве фона формы. Вы можете использовать любое изображение из своей медиатеки или из любого места в Интернете, к которому есть доступ у вашего сайта.
Что нужно сделать
Для максимальной удобочитаемости обеспечьте достаточный контраст между фоновым изображением и любым текстом или полями в форме.
Например, избегайте использования светлого текста на светлом фоне. Вместо этого используйте более темный текст на светлом фоне и более светлый текст на темном фоне.
2. Выбор формы
Затем выберите форму, которую хотите настроить. Если вы еще не создали форму, добавьте новую форму, нажав WPForms »Добавить новую .
Чтобы начать работу, вы можете выбрать один из множества доступных шаблонов.
Если ни одно из значений по умолчанию не соответствует вашим требованиям, вы все равно можете выбрать аналогичный шаблон и настроить его в Конструкторе форм.
3. Добавление фонового изображения в форму
В конструкторе форм перейдите к Настройки » Общие » Дополнительные .
Отсюда введите имя класса в поле Класс CSS формы.
Не стесняйтесь использовать любое имя для вашего класса, но мы рекомендуем добавить wpf- в качестве префикса. Это помогает избежать конфликтов между вашим пользовательским кодом CSS и любыми темами или плагинами на вашем сайте.
Примечание: Во избежание проблем обязательно начинайте имя класса с буквы. Также помните, что имена классов в CSS чувствительны к регистру. Для получения дополнительной информации ознакомьтесь с нашим руководством по добавлению классов в WPForms.
Использование существующего изображения
Если вы хотите использовать изображение из своей медиатеки, вам потребуется полный URL-адрес изображения. Чтобы получить это, сначала перейдите к Медиа » Библиотека.
Здесь щелкните изображение, которое хотите использовать.
В открывшемся диалоговом окне нажмите Копировать URL в буфер обмена .
URL-адрес изображения будет скопирован в буфер обмена.
Сделав это, перейдите в Внешний вид » Настроить и выберите Дополнительный CSS.
Затем создайте пользовательский класс со свойством background-image и вставьте URL-адрес, который вы скопировали ранее.
Ниже мы написали пример такого класса. Не забудьте заменить /path/wpforms-backdrop.png фактическим URL-адресом вашего изображения.
.wpf-пользовательский фон {
фоновое изображение: url(/path/wpforms-backdrop.png) !важно;
отступ: 15px 35px !важно;
/*Заполнение не является обязательным, но улучшает внешний вид при использовании фонового изображения в вашей форме.*/
}
Ваши настройки должны выглядеть примерно так.
Убедившись, что код правильный, нажмите Опубликовать , чтобы сохранить изменения.
Если в вашем коде нет ошибок, ваша форма теперь будет иметь фоновое изображение. Вот пример формы с использованием приведенного выше кода:
Использование градиента в качестве фонового изображения
С помощью CSS цветовые градиенты можно использовать в качестве изображений, и это решение также работает с вашими формами.
Градиенты широко настраиваются и могут использовать любое количество цветов.
Поскольку градиенты генерируются автоматически, вам не нужно исходное изображение из вашей медиатеки или где-либо еще в Интернете. Это дает преимущество повышенной скорости и уникальности. Вам также не придется беспокоиться о пропаже исходного изображения.
В CSS доступно три вида градиентов:
-
conic-gradient() -
линейный градиент() -
радиальный градиент()
В этом примере мы покажем вам, как использовать простой линейный градиент в качестве фона для вашей формы. Просто напишите свой класс, как и раньше, но вместо URL-адреса мы будем использовать функцию CSS 9.0406 линейный градиент() .
Чтобы увидеть, как это работает, посмотрите пример кода ниже:
.wpf-custom-background {
background-image: linear-gradient(#0299ed, #FFFFFF) !важно;
/*Заполнение не обязательно, но настоятельно рекомендуется*/
отступ: 15px 35px !важно;
}
Это создаст мягкий градиент от синего к белому в качестве фонового изображения вашей формы:
Вот и все! Теперь вы знаете, как добавить фоновое изображение в свои формы в WPForms.