CSS: вставить картинку - вот как это работает
Видео по теме: (May 2024).
В этом практическом совете мы объясним, как вставить изображение с помощью CSS. В основном, изображения могут быть вставлены здесь только в виде фоновых изображений. Однако этого вполне достаточно.
Вставить изображение в CSS
Например, если вы хотите включить изображение в заголовок с помощью CSS, например, логотипа, объявите следующие свойства в #header:
- "background: url (image.webp) #FFFFFF;"
- Здесь «bild.webp» понимается как URL вашего изображения либо относительно файла css, либо как абсолютный адрес вашего диска.
- С цветом вы объявляете цвет фона на вашем сайте.
- Изображение теперь можно позиционировать с использованием точной позиции, например: "background-position: 100px 100px;" или с помощью относительной информации, определяемой краем окна, такой как «background-position: bottom right;».
- Чтобы ваше изображение не повторялось непрерывно, вы можете указать «no-repeat» в свойстве «background-repeat». Это выглядит так: "background-repeat: no-repeat;".
- С помощью свойства "background-attachment" вы определяете, перемещается ли изображение с помощью прокрутки или остается в фиксированном месте на странице: "background-attachment: fixed;".
- Свойства указываются в файле CSS без кавычек.
В следующем практическом совете прочитайте, как интегрировать файл CSS с помощью HTML.