Фон CSS (Фон)

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

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

CSS стиль предоставляет несколько свойств для фона элемента, таких как:background-color,background-image,background-repeat,background-attachmentиbackground-position. В следующем разделе будет описано, как использовать эти свойства для настройки различных стилей фона.

Цвет фона

background-colorсвойство используется для установки цвета фона элемента.

Ниже приведен пример того, как установить цвет фона веб-страницы.

body {background-color: #f0e68c;}

Цвета в CSS обычно определяются следующим образом:

• шестнадцатеричное значение - например, "#ff0000"

• RGB значение - например, "rgb(255,0,0)"

• цветовые имена, такие как "красный"

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

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

background-imageсвойство устанавливает изображение в качестве фона html элемента.

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

body {background-image: url("leaf.jpg");}

повторение фона

По умолчанию, этоbackground-imageсвойство, можно повторять изображение как по горизонтали, так и по вертикали.

Используяbackground-repeatсвойство позволяет контролировать, как фоновое изображение будет тянуться на html элементе. Вы можете установить повторение по вертикали (оси y), горизонтали (оси x), двустороннее или двустороннее повторение фонового изображения.

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

body {
　　　　background-image: url("gradient.png");
　　　　background-repeat: repeat-x;
　　　　}

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

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

body {
　　　　width: 250px;
　　　　height: 200px;
　　　　overflow: scroll;
　　　　background-image: url("recycle.jpg");
　　　　background-attachment: fixed;
　　　　}

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

background-positionсвойство используется для управления положением изображения фона.

Если неbackground-positionЕсли не указано, изображение будетplaced в позиции по умолчанию в левом верхнем углу элемента, то есть(0,0)Пожалуйста, обратитесь к следующему примеру:

body {
　　　　background-image: url("tree.jpg");
　　　　background-repeat: no-repeat;
　　　　}

В следующем примере изображение фона расположено в верхнем правом углу, и положение изображения определяетсяbackground-positionопределение свойств.

body {
　　　　background-image: url("tree.jpg");
　　　　background-repeat: no-repeat;
　　　　background-position: 100% top;
　　　　}

Shorthand свойств фона

Из上面的 примера можно увидеть, что при обработке фона необходимо учитывать множество свойств. Также можно указать все эти свойства в одном свойстве, чтобы уменьшить код. Это называется shorthand-свойством.

отbackgroundсвойства используются для установки всех отдельных свойств фона (то есть шorthand-свойств)background-color,background-image,background-repeat,background-attachmentиbackground-position) в одном.

body {
　　　　background-color: #f0e68c;
　　　　background-image: url("smiley.png");
　　　　background-repeat: no-repeat;
　　　　background-attachment: fixed;
　　　　background-position: 250px 25px;
　　　　}

Используя шorthand, пример можно записать следующим образом:

body {background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px;}

ИспользованиеbackgroundПри кратком написании свойств порядок значений должен быть следующим.

Фон:Цвет Изображение Повторение Прикрепление Позиция ;

Если при использовании шorthand отсутствует или не указано значение для отдельного свойства фона, то будет использоваться значение по умолчанию для этого свойства (если оно есть).