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

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.