Фон CSS против цвета фона

Fon Css Protiv Cveta Fona

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

В этом руководстве мы подробно изучим разницу между свойствами background и background-color.

Давайте начнем!







Свойство фона CSS

Чтобы настроить фон любого HTML-элемента, CSS « фон «Использовано имущество. Это сокращенное свойство восьми других свойств, что означает, что вы можете использовать их все в одной строке. Эти другие свойства:



Синтаксис



Вот синтаксис свойства фона:





фон: цветное изображение, положение/размер, повторение исходного изображения, вложение клипа

Давайте перейдем к объяснению всех вышеупомянутых свойств по одному.

Свойство CSS background-color

С использованием ' фоновый цвет », вы можете установить цвет фона. Цвет появится за элементами HTML.



Синтаксис

Синтаксис свойства background-color:

фоновый цвет : цвет

В месте ' цвет », вы можете установить цвет фона, который должен отображаться за элементами.

Пример

Сначала в файле HTML мы создадим контейнер с помощью тега

, а затем добавим заголовок и абзац.

HTML

< див >

< h1 > LinuxПодсказка < / h1 >

< п > Добро пожаловать на наш сайт < / п >

< / див >

В CSS мы отрегулируем высоту div как « 100% », чтобы он отображался на всей странице и с размером шрифта текста как « xx-большой ». После этого установите цвет фона как « цвет морской волны ».

CSS

див {

высота : 100% ;

размер шрифта : xx-большой ;

фоновый цвет : цвет морской волны ;

}

На представленном ниже изображении вы можете видеть, что применяется цвет фона:

Свойство CSS background-image

фоновая картинка ” используется для установки одного или нескольких изображений в качестве фона HTML-элементов. Вы можете использовать это свойство для добавления разных фоновых изображений для разных элементов.

Синтаксис

Синтаксис свойства background-image:

фоновое изображение: URL()

Здесь укажите путь к изображению, которое вы хотите установить в качестве фона, в качестве аргумента для « URL() ».

Пример

В продолжение предыдущего примера добавьте фоновое изображение в « див ' учебный класс. Мы добавим URL-адрес изображения как « URL-адрес (img.jpg) ”:

див {

...

фоновая картинка : URL ( изображение.jpg ) ;

}

Представленный ниже вывод показывает, что фоновое изображение было успешно добавлено:

Обратите внимание, что изображение повторяется. Чтобы решить эту проблему, проверьте следующее свойство.

Свойство CSS background-repeat

Когда вы добавляете изображение в качестве фона на веб-страницу, оно повторяется по умолчанию. Чтобы избежать этого повторения и установить шаблон в соответствии с вашим выбором, фоновый повтор «Использовано имущество.

Синтаксис

Синтаксис свойства background-repeat:

фоновый повтор : повторение | повтор-х | повтор-y | неповторяющийся

Описание заявленных значений свойства background-repeat приведено ниже:

  • повторение: Он используется для повторения изображения в обоих направлениях, вертикальном и горизонтальном.
  • повтор-х: Используется для установки повторения изображения только по горизонтали.
  • повтор-y: Он определяет вертикальное повторение изображения.
  • неповторяющийся: Он используется, чтобы избежать повторения изображения.

Пример

Здесь мы установим значение свойства background-repeat как « неповторяющийся ”:

див {

...

фоновый повтор : неповторяющийся ;

}

Результат приведенного выше кода приведен ниже. Вы можете видеть, что изображение больше не повторяется:

CSS-свойство background-position

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

Синтаксис

Синтаксис свойства background-position:

фоновое положение : ценность

В месте ' ценность », вы можете указать положение изображения.

Пример

Здесь мы установим фоновую позицию как « центр ”:

див {

...

фоновое положение : центр ;

}

В выводе ниже изображение появляется в центре страницы:

Свойство CSS background-size

Чтобы установить размер фонового изображения, размер фона используется свойство.

Синтаксис

Background-size имеет следующий синтаксис:

размер фона : длина|обложка

Ниже приводится описание значений свойства background-size:

  • длина: Он используется для фиксации ширины и высоты фонового изображения.
  • покрытие: Он используется для настройки фонового изображения на всем фоне.

Пример

Мы установим размер фона как « 100% 'высота' и ' 80% ' ширина:

див {

...

размер фона : 100% 80% ;

}

Вы можете видеть, что размер изображения был изменен на основе указанных размеров:

CSS-свойство background-origin

фон-происхождение ” используется для настройки области позиционирования фонового изображения. По умолчанию изображение корректируется в верхнем левом углу.

Синтаксис

Синтаксис свойства background-origin:

фон-происхождение : обивка | пограничный ящик | поле содержимого

Значения свойства background-origin описаны ниже:

  • обивка: Это значение свойства background-origin по умолчанию, используемое для настройки положения фонового изображения в соответствии с краем заполнения.
  • граница: Он используется для установки изображения в соответствии с рамкой изображения.
  • поле содержимого: Он используется для установки фонового изображения в соответствии с содержимым изображения.

Примечание: Свойство background-origin не работает, если значение свойства background-attachment установлено как « исправлено ».

Пример

Сначала создайте границу вокруг контейнера. Здесь мы продолжим предыдущий пример и установим значение заполнения как « 10 пикселей ». После этого отрегулируйте ширину границы как « 15 пикселей », стиль как « хребет ', а цвет как ' RGB(1, 68, 68) ». В конце мы присвоим значение свойства background-origin как « поле содержимого ”:

див {

...

набивка : 10 пикселей ;

граница : 15 пикселей хребет RGB ( 1 , 68 , 68 ) ;

фон-происхождение : поле содержимого ;

}

Результат приведенного выше кода приведен ниже. Вы можете видеть, что позиция изображения устанавливается в соответствии с содержимым div:

CSS-свойство background-clip

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

Синтаксис

Синтаксис свойства background-clip:

фон-происхождение : пограничный ящик | обивка | поле содержимого

Значения свойства background-origin описаны ниже:

  • граница: Это значение свойства background-origin по умолчанию, используемое для установки цвета фона за границей.
  • обивка: Он используется для настройки цвета в поле заполнения элемента.
  • поле содержимого: Он используется для установки цвета фона в соответствии с содержимым элемента.

Пример

Мы продолжим предыдущий пример и изменим значение стиля границы на « пунктирный », чтобы понять свойство background-clip. После этого мы установим значение свойства background-clip как « обивка ”:

див {

...

фоновый клип : обивка ;

}

Вывод означает, что белый цвет фона отображается, когда край границы закончился:

CSS-свойство background-attachment

фоновое вложение ” используется для настройки поведения или изображения при прокрутке страницы. Его поведение может быть задано прокруткой с другими элементами или фиксировано.

Синтаксис

Синтаксис свойства background-attachment:

фоновое вложение : ценность

Вы можете установить значение background-attachment как « исправлено ”, чтобы исправить фоновое изображение или “ прокрутить », чтобы изображение прокручивалось вместе со страницей.

Примечание: По умолчанию значение свойства background-attachment установлено как « прокрутить ».

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

Для этого мы устанавливаем значение свойства background-attachment как « исправлено ”:

див {

...

фоновое вложение : исправлено ;

}

Вот результат, демонстрирующий, что изображение было исправлено:

Теперь перейдем к сравнению свойств background и background-color.

Фон CSS против цвета фона

В данной таблице будут различаться свойства background и background-color на основе их характеристик:

Функции CSS-фон Цвет фона CSS
Тип Это супер свойство. Это подсвойство фонового свойства.
Функциональность Он устанавливает все свойства фона. Он устанавливает только цвет фона.
Диапазон Он поддерживает все свойства фона Он поддерживает только свойство background-color
Уровень Когда вам нужно добавить несколько значений фона, его легко использовать. Вы можете установить значения всех свойств фона одновременно. Его можно использовать, когда вам нужно добавить только один цвет фона.
Синтаксис фон: значения

(Значения: bg-color, bg-image и другие свойства)

цвет фона: цвет

Было объяснено, чем свойства background-color отличаются от свойств фона.

Вывод

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