CSS Background Image - Как добавить URL изображения в ваш Div

Допустим, вы хотите разместить одно или два изображения на веб-странице. Один из способов - использовать background-imageсвойство CSS.

Это свойство применяет одно или несколько фоновых изображений к элементу, например a , как объясняется в документации. Используйте его из эстетических соображений, например, для добавления текстурированного фона на вашу веб-страницу.

Добавить изображение

С помощью background-imageсвойства легко добавить изображение . Просто укажите путь к изображению в url()значении.

Путь к изображению может быть URL-адресом, как показано в примере ниже:

div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 

Или это может быть локальный путь. Вот пример:

body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 

Добавить несколько изображений

Вы можете применить к background-imageсобственности несколько изображений .

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } 

Это много кода. Давайте разберемся с этим.

Разделяйте url()значения изображения запятыми.

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 

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

background-repeat: no-repeat, no-repeat; background-position: right, left; 

Есть несколько дополнительных свойств, которые вы можете добавить к своим фоновым изображениям, например background-repeatи background-position, которые мы использовали в приведенном выше примере. Вы даже можете добавить градиенты к фоновому изображению.

Посмотрите, как это будет выглядеть, когда мы все сложим.

Вопросы заказа

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

Вот пример.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } 

В приведенном выше коде мы перечислили два изображения. Первое изображение (morocco-blue.png) будет перед вторым (oriental-tile.png). Оба изображения имеют одинаковый размер и непрозрачность, поэтому мы видим только первое изображение.

Но если мы переместим второе изображение (oriental-tile.png) вправо на 200 пикселей, то вы сможете увидеть его часть (остальное останется скрытым).

Вот как это выглядит, когда мы собираем все вместе.

Когда следует использовать фоновое изображение?

В этом отеле есть что нравится background-image. Но есть недостаток.

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

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

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

Таким образом, вы можете добавить текст к элементу изображения, используя altатрибут, описывающий изображение. Предоставленный текст будет восприниматься программами чтения с экрана.

Подумайте об этом так: background-imageэто свойство CSS, а CSS фокусируется на представлении или стиле; HTML фокусируется на семантике или значении.

Когда дело доходит до изображений, у вас есть варианты. Если изображение необходимо для украшения, то background-imageнедвижимость может стать для вас хорошим выбором.

Я пишу об обучении программированию и о том, как это лучше всего делать ( amymhaddad.com).