Свойство 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, поскольку оно также принимает значения изображения.
Для добавления фонового изображения необходимо использовать синтаксис URL и изображение.
Приведенный выше код добавляет изображение собаки в наш контейнер, и это выглядит как пример ниже.
Установка нескольких фонов
В спецификацию CSS3 добавлена поддержка нескольких фонов, наложенных друг на друга. Свойство background имеет один или несколько слоев фона. Чтобы добавить несколько фонов, вы должны использовать список изображений или градиентов, разделенных запятыми.
Когда мы добавляем несколько фонов с помощью списка, разделенного запятыми, первое значение — это верхний слой, второе значение — это второй слой, а цвет фона всегда является последним слоем.
В приведенном выше коде мы добавляем два фоновых изображения с помощью одного свойства фона, доказывая, что мы можем легко добавить несколько фонов в свойство фона CSS.
Первое изображение всегда размещается на верхнем слое, а второе — на втором; это относится ко всем изображениям. Это связано с тем, что по умолчанию второе изображение повторяется, а первое изображение не повторяется. И вы видите, что первое изображение сложено со вторым изображением.
Проблемы доступности
Браузеры не предоставляют вспомогательным технологиям никакой конкретной информации о фоновых изображениях. Это особенно важно для программ чтения с экрана, так как программа чтения с экрана не объявляет о своем присутствии и ничего не сообщает своим пользователям. Если изображение содержит информацию, важную для понимания общей цели страницы, более разумно описать ее семантически в документе.
Поддержка браузера
Вам не нужно беспокоиться о свойстве фона CSS, поскольку оно поддерживает все современные браузеры, такие как:
- Гугл Хром,
- Internet Explorer,
- Фаерфокс,
- Опера и
- Сафари.
Заключение
- Свойство фона CSS является сокращением для следующих свойств:
- фоновая клипса,
- цвет фона,
- фоновое изображение,
- фон-происхождение,
- фоновая позиция,
- повтор фона,
- размер фона и
- background-attachment.
- фоновое свойство принимает все восемь свойств, и мы можем сделать множество вариаций его синтаксиса.
- С помощью свойства background мы можем создать несколько фонов для HTML-элемента.
Фон CSS
gif») золото 90% 30% без повторов;
} <дел>Свойства этого элемента div были заданы с помощью свойства background, которое является сокращением для установки всех свойств фона.
Свойство CSS background — это сокращенное свойство для установки фона HTML-элемента.
Это свойство позволяет задать большинство свойств фона с помощью одного свойства.
Свойство background задает следующие свойства:
-
фоновое изображение -
фоновая позиция -
размер фона -
повтор фона -
фон-происхождение -
фоновая клипса -
фоновое крепление -
цвет фона
Синтаксис
[
Где
Количество элементов, разделенных запятыми, определяет количество фоновых слоев.
Возможные значения
- bg-изображение
- Задает свойство
background-image. - позиция
- Задает свойство
background-position. - черный размер
- Задает свойство
background-size. - повторяющийся стиль
- Задает свойство
background-repeat. - насадка
- Задает свойство
background-attachment. - коробка
- Если присутствует одно значение box , оно устанавливает это значение как для
background-origin, так и дляbackground-clip. Если присутствуют два значения, то первое устанавливаетbackground-origin, а второе.фоновый клип. - «фоновый цвет»
- Задает свойство
background-color.
Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:
-
начальный - Представляет значение, указанное как начальное значение свойства.
-
наследовать - Представляет вычисленное значение свойства родительского элемента.
-
снято с охраны - Это значение действует как
наследуетиликак начальное, в зависимости от того, наследуется ли свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.
Общая информация
- Исходное значение
- Основано на значениях отдельных свойств. Их начальные значения таковы:
-
фоновое изображение -
нет -
фоновая позиция -
0% 0% -
размер фона -
авто -
повтор фона -
повтор -
приставка-фон -
свиток -
цвет фона -
прозрачный -
фон-происхождение -
набивочный ящик -
фоновый клип -
бордюр
-
- Применяется к
- Все элементы
- Унаследовано?
- №
- СМИ
- Визуальный
- Анимируемый
- Да (см.
