В процессе внешней разработки к HTML-страницам часто добавляются фоновые изображения ради красоты страницы. Итак, как использовать CSS, чтобы установить изображение в качестве фона в html? Эта статья познакомит вас с тем, как установить фоновое изображение в CSS. Друзья, которым это нужно, могут обратиться к ней и изучить ее. Надеюсь, она будет вам полезна.
1. Общий обзор
CSS может добавлять цвета фона и фоновые изображения, а также настройки изображения.
Атрибут фона CSS — это свойство, которое специально устанавливает фон. Вы можете установить цвет фона или фоновое изображение.
2. Атрибуты
1. цвет фона
(1) Определение и использование: атрибут background-color задает цвет фона элемента.
(2) Диапазон фона элемента
Свойство background-color задает сплошной цвет элемента. Этот цвет заполняет содержимое, отступы и границы элемента, дойдя до внешних границ границы элемента (но не до полей). Если граница имеет прозрачные части (например, пунктирную рамку), цвет фона будет виден сквозь эти прозрачные части.
(3) прозрачное значение
Хотя в большинстве случаев использовать прозрачность не обязательно. Однако если вы не хотите, чтобы элемент имел цвет фона, и вы не хотите, чтобы настройки цвета браузера пользователя влияли на ваш дизайн, то установка значения прозрачности все равно необходима.
Используйте фоновый цвет, чтобы установить цвет фона для элемента:
<!DOCTYPEhtml><html><head><title>Фон CSS</title><style>#bg{color:white;background-color:blue;margin:20px;/*Установите внешнее поле на 20 пикселей*/padding : 20 px;/*Установите отступ на 20 пикселей*/border:10pxdottedyellow;/*Установите желтую пунктирную рамку шириной 10 пикселей*/</style></head><body><pid=bg>атрибут background-color</p </body></html>Результаты отображения следующие:
Из результатов работы мы видим, что атрибут background-color может установить для элемента сплошной цвет фона. Этот цвет будет заполнять содержимое, отступы и область границы элемента (его также можно понимать как границу и границу). все области внутри него). Для элемента Области за пределами границы (поля) не действуют.
2. background-image устанавливает фоновое изображение.
фоновое изображение:url(imgs/main_bg.jpg),
Если свойство установлено в файле CSS, а изображение не находится в папке CSS, добавьте перед ним путь, чтобы вернуться в предыдущую папку.../
(1) Атрибут фонового изображения устанавливает фоновое изображение для элемента.
(2) Фон элемента занимает весь размер элемента, включая отступы и границы, но не поля.
(3) По умолчанию фоновое изображение расположено в левом верхнем углу элемента и повторяется по горизонтали и вертикали.
(4) url('URL'): Путь, указывающий на изображение.
Совет: Установите доступный цвет фона, чтобы страница выглядела хорошо, если фоновое изображение недоступно.
3. Повторение фона-повторение фонового изображения
По умолчанию фоновое изображение будет занимать всю страницу. Если фоновое изображение недостаточно велико, чтобы покрыть всю страницу, фоновое изображение будет повторяться по оси абсцисс и ординат.
4. background-size устанавливает размер фонового изображения.
5. background-position устанавливает положение фонового изображения.
Значения по умолчанию: слева, снизу, справа, сверху, по центру (по центру)
Примечание. Вы также можете использовать числовые значения или проценты, например, фоновую позицию: 10 пикселей 10 пикселей представляют собой расстояние по горизонтальным и вертикальным координатам от левой и верхней границ;
6. Установлено ли для фонового прикрепления фиксированное значение?
7.фоновое происхождение
Background-origin — это новое свойство CSS3. При использовании атрибута background-position для установки положения фонового изображения по умолчанию вычисляется положение верхнего левого угла элемента. Вы также можете использовать атрибут фонового происхождения, чтобы установить относительное положение атрибута фонового положения для позиционирования фонового изображения. Необязательные значения атрибута фонового происхождения следующие:
8. фоновый клип
background-clip — новый атрибут в CSS3, с помощью которого можно задать область отображения фонового изображения. Необязательные значения атрибута background-clip следующие:
Примечание. Прозрачность фона означает, что фон поля полупрозрачен, а содержимое внутри поля не затрагивается.
9. фон
Фон — это сокращение атрибута фона. С его помощью вы можете не только установить определенный атрибут фона для элемента, но также установить несколько или все атрибуты фона одновременно. При настройке нескольких свойств фона не существует фиксированного порядка, но рекомендуется использовать следующий порядок:
цвет-фона||изображение-фона||позиция-фона[/размер-фона]?||повторение-фона||прикрепление-фона||происхождение-фона||клип-фона
Примечание. Разница между фоновым изображением и атрибутом img:
(1) Элемент img принадлежит концепции HTML, а фоновое изображение — концепции CSS.
(2) Если изображение принадлежит веб-контенту, необходимо использовать элемент img.
(3) Если изображение используется только для украшения страницы, необходимо использовать фоновое изображение.