Оформление фона в CSS

29 просмотров Время на прочтение: 3 минут(ы)

Пример 1

В таблице стилей с помощью свойства “background-color” задаётся синий цвет фона текста.

Пример 2

В таблице стилей свойство “background-image” задаёт фоновое изображение из файла “cat.jpg”. При этом изображение повторяется по горизонтали и по вертикали. Чтобы изменить режим повторения используется свойство “background-repeat”:

Значение background-repeatРезультат
no-repeat
repeat-x
repeat-y
repeatРезультат такой же как в примере 2

Пример 3

Свойство “background-position” задаёт позицию фонового изображения. Значение “center” этого свойства означает, что изображение отображается в центре. Позиция может быть задана в процентах по горизонтали и по вертикали. По умолчанию позиция равна “0% 0%”, что соответствует верхнему левому углу. Значения свойства “background-position”:

СловамиВ процентахРезультат
left top0% 0%
right bottom100% 100%
left center0% 50%
center top50% 0%

Пример 4

Значение “contain” свойства “background-size” вписывает изображение в HTML элемент “div”. У этого свойства есть значение по умолчанию “auto”, при котором изображение имеет оригинальный размер. Также в этом свойстве можно задать ширину и высоту. Например, “100px 50px” – ширина 100 пикселей, высота – 50. Или “200% 50%” – ширина в 2 раза больше оригинальной, а высота – в 2 раза меньше. При значении “cover” вписывает HTML элемент в изображение:

Пример 5

Результат такой же как примере 4. В этой таблице стилей несколько свойств по работе с фоном объединены в одно – “background”.

РубрикиCSS

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

©2024 Шигорин Сергей Владимирович
Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять
Top.Mail.Ru
Каталог сайтов Всего.ру
Белый каталог сайтов PopCat.ru