Начало работы с фоном CSS

Главная/Блог/Учебники и руководства/Учебник CSS: Начало работы с фоном CSS

10 сентября 2021 г. — 8 мин чтения веб-разработка. Существует множество различных свойств CSS, которые мы можем использовать для управления и настройки наших веб-страниц. Фон CSS — одно из таких свойств. Мы можем использовать свойство фона CSS, чтобы установить цвета фона, изображения, размеры и многое другое. Сегодня мы собираемся обсудить это полезное свойство CSS и изучить все различные вещи, которые мы можем с ним делать.

Начнем!

Мы рассмотрим :

  • Что такое фон CSS?
  • Фоновое изображение CSS
  • Цвет фона
  • Размер фона
  • Фоновое положение
  • Повтор фона
  • Фоновое крепление
  • Фоновый градиент
  • Подведение итогов и следующие шаги

Что такое фон CSS?

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

Фон CSS позволяет нам управлять многими свойствами фона, такими как:

  • Цвет
  • Размер
  • Позиция
  • Повторить
  • Приложение
  • Градиент
  • Изображение
  • Непрозрачность
  • и т. д.

Существует обширная поддержка браузера для фона CSS. Поддерживается следующими браузерами:

  • Хром
  • Край
  • Фаерфокс
  • Internet Explorer
  • Опера
  • Сафари

Фоновое изображение CSS

Мы можем использовать свойство background-image для установки фоновых изображений для различных элементов. Современные браузеры поддерживают различные типы файлов изображений, такие как JPG, PNG, IMG, GIF и SVG. Мы также можем установить резервный цвет, который будет отображаться в случае, если наше изображение не загрузится или наш браузер не поддерживает наш тип файла изображения.

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

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

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

Если мы хотим установить резервный цвет, мы можем использовать следующий код:


Цвет фона

Свойство background-color позволяет нам применять сплошные цвета в качестве фона для элементов. Существуют различные значения свойств, которые мы можем использовать для управления аспектами цвета фона. Эти значения включают:

  • цвет : Это значение указывает цвет фона. Мы можем выбрать из списка значений цвета CSS, чтобы выбрать точные цвета, которые мы хотим использовать.

  • непрозрачность : Это значение указывает прозрачность элемента.

  • прозрачный : Это значение указывает, что цвет фона прозрачный.

  • начальный : Для свойства будет установлено значение по умолчанию.

  • наследовать : свойство будет унаследовано от родительского элемента.

Мы также можем установить разные цвета фона для разных элементов. Вот пример:

Мы также можем использовать число от 0.0 до 1.0 , чтобы установить непрозрачность нашего фонового цвета. Чем меньше число, тем прозрачнее цвет.

Рассмотрим пример:


Размер фона

Свойство background-size позволяет указать размер фонового изображения.


Положение фона

Свойство background-position позволяет указать начальную позицию фонового изображения. Фоновые изображения по умолчанию помещаются в верхний левый угол элемента. Это свойство имеет различные значения свойств, которые позволяют нам контролировать расположение наших фоновых изображений. Эти значения включают:

  • слева вверху : Фоновое изображение будет начинаться слева вверху.
  • слева внизу : Фоновое изображение будет начинаться слева внизу.
  • слева от центра : Фоновое изображение будет начинаться слева от центра.
  • справа вверху : Фоновое изображение будет начинаться справа вверху.
  • справа внизу : Фоновое изображение будет начинаться справа внизу.
  • справа по центру : Фоновое изображение будет начинаться справа по центру.
  • центр вверху : Фоновое изображение будет начинаться в центре вверху.
  • по центру снизу : Фоновое изображение будет начинаться по центру снизу.
  • центр центр : Фоновое изображение будет начинаться в центре центра.
  • x% y%     : Значение x соответствует горизонтальному положению, а значение y соответствует вертикальному положению. Верхний левый угол равен 0% 0% , а нижний правый угол равен 9.0207 100% 100% .
  • xpos ypos : Значение xpos — это горизонтальное положение, а значение ypos — вертикальное положение. Верхний левый угол — это значение 0 0 .
  • начальный : Для свойства будет установлено значение по умолчанию.
  • наследовать : свойство будет унаследовано от родительского элемента.

Продолжайте изучать CSS бесплатно.

Начните бесплатное знакомство с CSS, HTML и JavaScript с помощью нашей 1-недельной образовательной неограниченной пробной версии. Текстовые схемы обучения Educative легко просматриваются и включают живую среду кодирования, что делает обучение быстрым и эффективным.

Стать разработчиком внешнего интерфейса


Повтор фона

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

  • повтор : Фоновое изображение повторяется по вертикали и горизонтали. Он обрежет финальное изображение, если оно не подходит.
  • Repeat-x
    : Фоновое изображение повторяется по горизонтали.
  • Repeat-y : Фоновое изображение повторяется по вертикали.
  • без повтора : Фоновое изображение не будет повторяться (оно будет показано только один раз).
  • пробел : Фоновое изображение будет повторяться настолько, насколько это возможно без обрезки. Первое и последнее изображения размещаются в начале и в конце элемента, а пробелы равномерно распределяются между повторяющимися изображениями.
  • round : Фоновое изображение будет повторяться и манипулироваться, чтобы полностью заполнить пространство (без пробелов между ними).
  • начальный : Для свойства будет установлено значение по умолчанию.
  • наследовать : свойство будет унаследовано от родительского элемента.

Фоновое вложение

Мы можем использовать свойство background-attachment, чтобы указать, хотим ли мы, чтобы наши фоновые изображения были фиксированными, или мы хотим, чтобы они перемещались вместе с остальной частью страницы при прокрутке. Это свойство имеет разные значения свойств, которые позволяют нам управлять тем, как мы прикрепляем наши фоновые изображения

. Эти значения включают:

  • исправлено : Фоновое изображение не прокручивается вместе со страницей.

  • локальный : Фоновое изображение прокручивается вместе с содержимым элемента.

  • прокрутка : Фоновое изображение прокручивается вместе со страницей.

  • начальный : Для свойства будет установлено значение по умолчанию.

  • наследовать : свойство будет унаследовано от родительского элемента.

Давайте рассмотрим пример фиксированного значения :

Теперь давайте рассмотрим пример прокрутки значения. Это заставит изображение прокручиваться вместе со страницей.


Градиент фона

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

Линейные градиенты

Свойство linear-gradient позволяет создавать линейные градиенты сверху вниз, слева направо и по диагонали. Мы должны определить по крайней мере два цветовых маркера, которые представляют собой цвета, которые мы хотим передать вместе. Мы можем определить несколько остановок цвета и повторить градиенты, если захотим.

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

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

Радиальные градиенты

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

Давайте посмотрим на базовый радиальный градиент с тремя цветами:

Теперь давайте посмотрим на повторяющийся радиальный градиент:


Завершение и следующие шаги

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

  • Flexbox
  • Селекторы CSS
  • Встроенные и блочные элементы
  • HTML-шаблоны и HTML-элементы

Чтобы приступить к изучению этих и других концепций, ознакомьтесь со схемой обучения Educative Стать разработчиком переднего плана

. На этом пути практического обучения вы освоите HTML, CSS и JavaScript, чтобы создавать красивые и функциональные веб-сайты и веб-приложения. Навыки, которые вы приобретете на этом пути, дадут вам ценную опору на вашем фронтенд-путешествии!

Приятного обучения!

Продолжить изучение CSS

  • Вопросы для интервью по CSS: Шпаргалка для собеседований перед интерфейсом
  • Полное руководство по позициям CSS: макет элемента в CSS
  • Усовершенствуйте свои навыки работы с интерфейсом: практические занятия с HTML5 и CSS3

НАПИСАН BYErin Schaffer

Свойство фона CSS — темы масштабирования

Обзор

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

Существует множество сценариев, когда мы хотим добавить изображение к фону нашего элемента или цвет/градиент фона к нашему элементу.

Допустим, у вас есть два HTML-элемента div и вы хотите добавить к ним фоновое изображение или градиент.

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

Это единственные 3 свойства, которые используются в приведенном выше примере, но сокращенное свойство фона состоит из восьми других подсвойств:

  • фоновое вложение
  • фон-клип
  • цвет фона
  • фоновое изображение
  • фон-происхождение
  • фоновая позиция
  • повтор фона
  • размер фона

У вас есть свобода использовать их как одно свойство, но фоновое сокращение дает вам возможность использовать их одновременно, и вы даже можете оставить свойства, которые вы не хотите использовать.

Синтаксис

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

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

Когда мы хотим добавить желтый цвет к фону контейнера, мы можем сделать это следующим образом:

Вышеприведенный код только добавляет желтый цвет к фону контейнера.

И это одна из самых простых вещей, которые мы можем сделать с помощью свойства фона.

Допустим, у вас есть изображение с высотой и шириной 50 пикселей, а размер вашего контейнера составляет 500 пикселей в высоту и ширину, и вы не хотите повторять изображение внутри контейнера.

На изображении ниже видно, что изображение не повторяется в контейнере.

Но что, если мы хотим, чтобы изображение повторялось по оси X? Затем вам нужно заменить no-repeat на Repeat-x.

Теперь вы можете видеть, что изображение повторяется по оси x.

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

Ниже приведены примеры изменения свойства фона:

Фон в CSS

Свойство Фон CSS используется для определения различных стилей фона элемента. Это сокращенное свойство, которое одновременно устанавливает все свойства стиля фона, такие как цвет, размер, происхождение, изображение и размер.

Составляющие свойства

Фон CSS — это сокращение, которое принимает значения 8 составных свойств. Теперь поговорим о каждом из них подробно с примерами.

1. background-attachment :

Свойство 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.

Первое изображение всегда размещается на верхнем слое, а второе — на втором; это относится ко всем изображениям.

No related posts.