Свойство фона-изображения позволяет указать изображение, которое будет отображаться в фоновом режиме. Его можно использовать в сочетании с фоновым цветом, поэтому, если изображение не повторяется, цвет фона будет заполнен цветом фона, если изображение не может быть покрыто. Код прост, просто помните, что путь относительно таблицы стилей, поэтому в следующем коде изображение и таблица стилей находятся в одном и том же каталоге
Для картинок мы сначала подумаем о фоновой картине. Потому что многие из наших украшений достигаются с фоновыми картинками. Поскольку это так, давайте начнем с фонового изображения управления CSS.
Определение и использованиеСвойство фона-изображения устанавливает фоновое изображение для элемента.
Фон элемента занимает все измерения элемента, в том числе внутренние поля и границы, но не внешние поля.
По умолчанию фоновое изображение расположено в верхнем левом углу элемента и повторяется горизонтально и вертикально.
1. CSS управление фоновым изображением:Для веб -страницы, когда мы начали проектировать, мы можем не слишком много думать о том, что такое фоновое изображение, потому что большинству из них просто нужно разработать цвета фона. Я думаю, что это очень просто, потому что это то же самое, что и музыка на переднем плане, а скорость открытия веб -страницы будет иметь определенное влияние. Тем не менее, для общих личных сайтов или личных блогов, конечно, необходимо показывать свою собственную личность. Конечно, ничто не будет слишком идеальным. Есть хорошие и плохие вещи. То есть, когда изображение недоступно, но CSS доступен, содержимое замены не будет отображаться. Следовательно, не рекомендуется использовать фоновые изображения CSS в тексте кнопки навигации или аналогичные ситуации.
Есть много атрибутов CSS, которые управляют фоновыми изображениями, и большинство из них будут использоваться, если они связаны с изображением.
(1) Импорт фоновых изображений:Конечно, все наиболее знакомы, это фоновая и фоновая изображение.
Код для разработки фоновых изображений для веб -страниц:
Body {fourange: url (d:/images/04.jpg)}
или
Body {background-image: url (d:/images/04.jpg)}
Таким образом, мы можем импортировать изображения, которые мы хотим использовать в качестве фона в веб -странице.
(2) Как отображать фоновые картинки:Конечно, использование вышеупомянутого кода не сможет выразить желаемый эффект. Потому что, если картина маленькая, она будет перекрыта в ровном виде. Если он большой, чтобы отобразить его, появится полоса прокрутки, что не очень хорошо. Поэтому мы должны использовать повторную переосмысление фонового оборота для управления дисплеем.
Это значение:
Повторите: значение по умолчанию. Фоновое изображение, плиточное в портретном и горизонтальном направлении
без повторения: фоновое изображение не плиткой
Repeat-x: фоновое изображение только горизонтально
Повторите Y: фоновое изображение покрыто только в вертикальном направлении
Что касается кода, я думаю, что любой, кто знает немного CSS, знает это, следующим образом
:
Body {founal: url (d:/images/04.jpg);
Таким образом, он отображается на исходном размере изображения.
(3) управление размером фонового изображения:Но вопрос в том, что, если картина слишком большая? Для хорошей веб -страницы лучше не использовать слишком большие изображения. Причина также была упомянута выше, что влияет на скорость открытия веб -страницы. Нам лучше использовать PS или фейерверк, чтобы справиться с этим. Но так как я упомянул об этом, мы не боимся использовать CSS для управления размером изображения.
Я думаю, что многие люди, естественно, будут использовать следующий код:
Скопировать код