Руководство по фону CSS

Исходная ссылка: Фоны в CSS: все, что вам нужно знать
Ссылка для перевода: Руководство по фону CSS

Пожалуйста, сохраняйте авторские права и ссылки при перепечатке.

Фон — это важная часть CSS и одно из базовых знаний CSS, которые вам необходимо знать. В этой статье будут рассмотрены основы использования CSS-фона (фона), включая такие атрибуты, как фоновое прикрепление и т. д., а также представлены некоторые распространенные методы работы с фоном (фоном), а также с фоном (фоном) в CSS3 (включая 4 новое свойство фона).

Фон в css2

Обзор

В CSS2 есть 5 основных свойств фона:

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

Все эти свойства можно объединить в одно сокращенное свойство: фон. Важно отметить, что фон занимает всю область содержимого элемента, включая отступы и границы, но не включает поля элемента. Он отлично работает в Firefox, Safari, Opera и IE8, но в IE6 и IE7 фон не включает рамку.

Основные свойства

цвет фона

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

цвет фона: синий;
цвет фона: RGB (0, 0, 255);
цвет фона: #0000ff;

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

фоновое изображение

Атрибут background-image позволяет указать изображение, которое будет отображаться в фоновом режиме. Может использоваться совместно с фоновым цветом, поэтому, если изображение не повторяется, области, не покрытые изображением, будут заполнены цветом фона. Код очень прост: помните, что путь указан относительно таблицы стилей, поэтому в следующем коде изображение и таблица стилей находятся в одном каталоге.

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

Но если изображение находится в подкаталоге images, оно должно быть:

фоновое изображение: URL(images/image.jpg);

Tangbantomatoes: используйте ../ для указания каталога верхнего уровня, например, фоновое изображение: url(../images/image.jpg), указывающее, что изображение находится в подкаталоге images в каталоге верхнего уровня; таблица стилей. Это немного запутанно, но это уже должно быть известно всем, поэтому я не буду подробно останавливаться на этом. Front-end Observation. Все права защищены. Пожалуйста, сохраняйте ссылку при перепечатке.