Исходная ссылка: Фоны в 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. Пожалуйста, сохраняйте ссылку при перепечатке.