Css background картинка: background-image — CSS | MDN

04.06.2023 Разное

Содержание

image — свойство css :: руководство cssdot.ru

Свойство background-image позволяет установить одно или несколько фоновых изображений для элемента, которые будут отображаться в границах области, охватываемой внешним краем рамок элемента, и заполненной фоновым цветом, если он задан с помощью свойства — (background-color).

Если в качестве фона используются несколько изображений, то более «близким» к пользователю считает первый слой, потом второй, и так далее — до конца списка, а слой залитый фоновым цветом лежит позади всех фоновых изображений. Поэтому рекомендуется, задавать фоновые изображения в паре с цветом фона, чтобы в случае, когда по каким-либо причинам изображения не отобразились, или не успели загрузиться — содержание элемента не сливалось с подложкой.

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

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

Более подробно с рекомендациями на данную тему можно ознакомится в спецификации Web Content Accessibility Guidelines (WCAG) 2.0.

В качестве изображения возможно использовать следующие значения:

[:inherit:]

значение свойства наследуется от родительского элемента

[:none:]

изображение отсутствует, отображается как пустой прозрачный слой

[:image:]

значение, типа «изображение», которое может быть задано как:

ссылка на графический файл — url(относительный или абсолютный путь к изображению)
встроенное изображение — url(data:[тип][;charset=[кодировка]][;base64],данные )
градиент — linear-gradient(), radial-gradient() и т.д.
функция image()
функция element()
функция image-rect()

Практически все современные браузеры поддерживают значения — inherit, none, url(), а так же функции для градиентов, но с префиксами -moz, -webkit, -o. Функция image() хотя и описана в последней версии спецификации …, но на данный момент не поддерживается ни одним из браузеров. Функция element() определена в следующий версии спецификации CSS 4, и с префиксом реализована только в браузере Firefox. Функция image-rect()

не содержится в спецификациях и поддерживается только браузером Firefox.

Если в списке изображений, встречается такое, которое не может быть отображено (не поддерживаемый графический формат), загружено (нет доступа к сетевому ресурсу), либо оно пустое, то оно все равно считается за отдельный пустой слой, аналогично ключевому слову ‘none’.

Свойство background-image относится к спецификации CSS, применяется к всем элементам, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение none. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

Спецификация стандарта CSS 2. 1
Спецификация стандарта CSS 3
Описание на Mozilla Developer Network
Описание на Microsoft Developer Network
Описание на Safari Developer Library

Краткое описание

Фоновое изображение

Синтаксис:

CSS2 <image> | none | inherit

CSS3 [<image> | none [, <image> | none ]* | inherit

По умолчанию:

none

Наследование:

не наследуется

Объектная модель документа (DOM):

[элемент].style.background-image

Кроссбраузерная совместимость

Internet Explorer

Firefox

Chrome

Safari

Opera

Адаптирующиеся картинки-заставки на CSS — CSS-LIVE

Перевод статьи Flexible CSS cover images с сайта nicolasgallagher.com, c разрешения автора — Николаса Галахера.

Недавно я подключил к своим постам возможность добавления больших картинок-заставок, как показано выше. Исходное изображение обрезано, и до определенного максимального размера отображается в заданной пропорции. В этой статье описывается реализация этого способа.

Демо: Адаптирующиеся картинки-заставки на CSS

Поддержка браузерами: Chrome, Firefox, Safari, Opera, IE 9+

Функции

Способ, который масштабирует картинки-заставки и изменяет соотношение сторон, иллюстрирован на следующей диаграмме:

Элемент картинки-заставки должен уметь:

отображать фиксированное соотношение сторон, до тех пор, пока их конкретные максимальные размеры превышены;
поддерживать различные пропорции;
поддерживать свойства max-height и max-width;
поддерживать разные фоновые картинки;
отобразить изображение так, чтобы оно либо полностью заполняло компонент, либо целиком помещалось в нем;
центрировать изображение;

Соотношение сторон

Соотношение сторон пустого, блочного элемента может управляться с помощью установки в процентное значение его свойств padding-bottom или padding-top. Данное объявление (без какого-либо явного height), преобразует высоту элемента в 50% от его ширины.

.CoverImage {
  padding-bottom: 50%;
}

Изменения значения такого padding’a изменит и соотношение сторон. Например, результатом padding-а в 25% будет пропорция 4:1, padding в 33.333% в 3:1 соответственно, и т.д.

Максимальные размеры

Проблема с использованием этого трюка/хака для пропорций состоит в том, что если у элемента объявлено max-height, оно не будет учитываться. Это можно обойти с помощью другого «хака». Вместо того, чтобы выставлять padding элементу, мы можем создать псевдоэлемент и назначить padding уже ему.

.CoverImage:before {
  content: "";
  display: block;
  padding-bottom: 50%;
}

Теперь max-height у главного элемента будет работать. Следовало бы так же обрезать и переполнение псевдоэлемента.

.CoverImage {
  display: block;
  max-height: 300px;
  max-width: 1000px;
  overflow: hidden;
}

.   CoverImage:before {
  content: "";
  display: block;
  padding-bottom: 50%;
}

Этот прием для соотношения сторон используется компонентом FlexEmbed в препроцессоре SUITCSS. Этот компонент предназначен прежде всего для отзывчивых встраиваемых видео, но он достаточно гибок, чтобы быть полезным всякий раз, когда вам необходим отображаемый элемент с предопределённым соотношением сторон. Этот компонент предоставляет модификаторы для пропорций 2:1, 3:1, 16:9, и 4:3. Компонент картинок-обложек может расширить компонент FlexEmbed.

<div></div>

Фоновое изображение

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

.CoverImage {
  ...
  background-repeat: no-repeat;
  background-size: cover;
}

Если хотите разные обложки-картинки для разных ситуаций, они могут быть добавлены через атрибут style.

<div></div>

Изображения могут быть полностью отцентрированы с помощью позиции фона и центрирования блока. Эта гарантирует, что изображение будет отцентрировано в элементе, и что сам элемент будет так же отцентрирован внутри своего родителя (когда он достигнет значения max-width).

.CoverImage {
  ...
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}

Финальный результат

Если вы полагались на модуль FlexEmbed, то вам потребовалось совсем немного кода. (Посмотрите демо-пример со всем кодом, включающим код от FlexEmbed)

/**
 * требуется: suitcss/встроенная гибкость
 */

.CoverImage {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
  max-height: 300px;
  max-width: 1000px;
}

<div
    <
</div>

Вы можете добавить дополнительные настройки, такие как добавление фонового цвета, или возможность переключения между ключевыми словами cover и contain для background-size.

P.S. Это тоже может быть интересно:

CSS, перевод

Свойство CSS background-image — GeeksforGeeks

Улучшить статью

Сохранить статью

Уровень сложности: Эксперт
Последнее обновление: 01 июл, 2022

Читать

Обсудить

Улучшить статью

Сохранить статью

Свойство background-image используется для установки одного или нескольких фоновых изображений для элемента. По умолчанию он помещает изображение в верхний левый угол. Чтобы указать два или более изображений, нам нужно указать отдельные URL-адреса с запятой для обоих изображений.

Синтаксис:

 background-image: url('url')|none|initial|inherit;

Значения свойств:

url(‘url’): Указывает URL-адрес изображения. Чтобы указать URL-адрес более чем одного изображения, разделите URL-адреса запятой.
нет: Это случай по умолчанию, когда изображение не отображается.
начальный: Используется для установки значения свойства по умолчанию.

inherit: Наследует свойство родительского элемента.

Свойство background-image также можно использовать со следующими значениями:

linear-gradient() : используется для установки фонового изображения с линейным градиентом, которое определяется как минимум двумя цветами из сверху вниз.
radial-gradient(): Используется для установки радиально-градиентного фонового изображения, которое определяется как минимум двумя цветами от центра к краю.

Мы будем использовать приведенные выше значения свойств и понимать их на примерах.

url(‘url’): Когда фоновое изображение имеет URL.

Синтаксис:

 background-image: url('url')

Пример 1: Этот пример иллюстрирует свойство background-image, задав значение url как url.

HTML

< html >

< head >

< title >background-image property title >

< стиль >

body {

background-image: 19 9 9 9 0 90

`92`

} 
  
    H2, 
    H4 {
   : GREL 
   } 
  
    Тело {
    Текст-Альген: Центр; 
         } 
           style   > 
    head   > 
  
  <   body   > 
         <   h2   >GeeksforGeeks  h2  > 
    <  H4  > Иимфраж: URL;   H4  > 
  0092  <   div   > 
           GeeksforGeeks: A computer science portal for geeks 
           div   > 
    body   > 
    HTML  >

Выход:

Нет: свойство.

Синтаксис:

 background-image: url('url') none

Пример 2: Этот пример иллюстрирует свойство background-image, задав значение url равным none.

HTML

< html >

< head >

< title >background-image property title >

< style >

body {

background-image: url(

}

H2,

H4 {

9191 H4 {

919191 H4 {

H4 {

H40092 цвет: зеленый;

}

Тело {

Текст-Альген: Центр;

}

Стиль >

>

. 0091 >

< h2 >GeeksforGeeks h2 >

< h4 >background-image:url none; h4 >

< Div >

Geeksforgeeks: портал компьютерных наук для гека1 div >

body >

html >

Output:

начальный: Устанавливает для свойства значение по умолчанию.

Синтаксис:

 background-image: url('url') initial;

Пример 3: Этот пример иллюстрирует свойство background-image, задав значение url как начальное.

HTML

< html >

< head >

< title > CSS свойство background-image title >

< style >

0092 body {

background-image: url(

}

h2,

h4 {

color : green;

}

КОЛЕС {

выравнивание текста: по центру;

}

style >

head >

< body >

< центр >

< h2 >GeeksforGeeks h2 >

< h4 >CSS background-image:url initial; h4 >

center >

body >

html >

Output:

Supported Browsers: The browser supported by background-image Property are listed below:

Google Chrome 1. 0
Microsoft Edge 12.0
Firefox 1.0
Internet Explorer 4.0
Opera 3.5
Safari 1.0

Статьи по теме

Что нового

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

Как ускорить фоновые изображения

Фоновые изображения обычно используются в местах с текстом или контентом сверху. Это может быть слайдер, избранное изображение поста в блоге (как показано ниже) или главное изображение.

Скорее всего, они загружаются медленно и могут повлиять на взаимодействие с пользователем из-за увеличения параметра Largest Contentful Paint (LCP), если они находятся в указанной выше части.

Почему фоновые изображения работают медленно?
1. Запросы с низким приоритетом
2. Трудно ленивая загрузка и предварительная загрузка
Как ускорить фоновые изображения?
1. Использование тега IMG с объектным соответствием
2. Предварительная загрузка фонового изображения
3. Тег IMG с хаком 'display: none'
4. Добавление адаптивных изображений
5. Встроенное фоновое изображение в HTML
Дополнительная информация 90 Изображения 30 Медленный?
Запросы с низким приоритетом
Если изображение находится во внешнем файле CSS, оно будет загружено только после загрузки и анализа файла CSS и когда класс CSS фактически используется в HTML.
Это может отражаться в вашей основной метрике Web Vitals, например Largest Contentful Paint (LCP) , если эти фоновые изображения находятся в верхней части.
Если это тег IMG, изображение загружается мгновенно при анализе HTML.
Тяжелая отложенная загрузка и предварительная загрузка
Теги IMG могут использовать встроенную отложенную загрузку браузера, которая не требует JavaScript.
Вы по-прежнему можете лениво загружать фоновые изображения, если они находятся в HTML как встроенный стиль. Такие плагины, как FlyingPress, автоматически обнаруживают и загружают их в ленивом режиме.
Однако, если фоновое изображение находится внутри внешнего CSS-файла или внутреннего, все становится сложнее, поскольку мы не можем понять, имеет ли элемент HTML фоновое изображение или нет.
Примечание. Если вы используете FlyingPress, у нас есть вспомогательный класс « lazy-bg» для ленивой загрузки фоновых изображений даже внутри файлов CSS.
Как ускорить фоновые изображения?
Используйте тег IMG с объектной подгонкой
Фоновые изображения обычно используются в слайдерах с некоторым текстом/контентом в центре, или у вас есть фиксированный div, и вы хотите разместить изображение, которое будет «заполнять» без изменения размера области ( размер фона: обложка ).
Раньше было очень сложно добиться этого с помощью тегов IMG. Поэтому использование фоновых изображений имело смысл.
Тем не менее, есть новое свойство CSS object-fit: обложка , что дает с той же выгодой. Поддержка браузера также хороша.
Предварительно загрузить фоновое изображение
Независимо от того, используете ли вы фоновое изображение или тег IMG, если изображение находится в верхней части экрана, предварительно загрузите это изображение. Предварительная загрузка указывает браузеру загрузить это изображение с высоким приоритетом.
Тег IMG с хаком display: none0092 ,
background-position и background-blend-mode и т. д.
Поэтому в некоторых ситуациях лучше использовать background-image вместо тега IMG, чтобы использовать другие свойства CSS.
Вы можете добавить обычный тег IMG с отображением : нет . Это скажет браузеру немедленно загрузить изображение, но отобразить его с использованием фонового изображения.
Добавление адаптивных изображений
Вы добавляете srcset и размеры к обычным изображениям для предоставления адаптивных изображений на основе устройства:
```
  
```
Точно так же вы можете сделать то же самое для фоновых изображений, используя image-set :
В противном случае вы получите то же самое большое изображение для MacBook с разрешением 2880 пикселей и iPhone 6s с разрешением 750 пикселей!
Встроенное фоновое изображение в HTML
Если ваше фоновое изображение находится внутри внешнего файла CSS, встройте его в HTML.

Comments

Leave Comment

Css background картинка: background-image — CSS | MDN

image — свойство css :: руководство cssdot.ru

Смотри также:

Краткое описание

Синтаксис:

По умолчанию:

Наследование:

Объектная модель документа (DOM):

Кроссбраузерная совместимость

Internet Explorer

Firefox

Chrome

Safari

Opera

Адаптирующиеся картинки-заставки на CSS — CSS-LIVE

Функции

Соотношение сторон

Максимальные размеры

Фоновое изображение

Финальный результат

P.S. Это тоже может быть интересно:

Свойство CSS background-image — GeeksforGeeks

HTML

`92`

HTML

HTML

Как ускорить фоновые изображения

Оглавление

Запросы с низким приоритетом

Тяжелая отложенная загрузка и предварительная загрузка

Как ускорить фоновые изображения?

Используйте тег IMG с объектной подгонкой

Предварительно загрузить фоновое изображение

Тег IMG с хаком display: none0092 ,

Добавление адаптивных изображений

Встроенное фоновое изображение в HTML

Leave a Comment
Отменить ответ

Css background картинка: background-image — CSS | MDN

image — свойство css :: руководство cssdot.ru

Смотри также:

Краткое описание

Синтаксис:

По умолчанию:

Наследование:

Объектная модель документа (DOM):

Кроссбраузерная совместимость

Internet Explorer

Firefox

Chrome

Safari

Opera

Адаптирующиеся картинки-заставки на CSS — CSS-LIVE

Функции

Соотношение сторон

Максимальные размеры

Фоновое изображение

Финальный результат

P.S. Это тоже может быть интересно:

Свойство CSS background-image — GeeksforGeeks

HTML

92

HTML

HTML

Как ускорить фоновые изображения

Оглавление

Запросы с низким приоритетом

Тяжелая отложенная загрузка и предварительная загрузка

Как ускорить фоновые изображения?

Используйте тег IMG с объектной подгонкой

Предварительно загрузить фоновое изображение

Тег IMG с хаком display: none0092 ,

Добавление адаптивных изображений

Встроенное фоновое изображение в HTML

Leave a Comment Отменить ответ

`92`

Leave a Comment
Отменить ответ