CSS фоново изображение - Как да добавите URL адрес на изображение към вашето Div

Да кажем, че искате да поставите изображение или две на уеб страница. Един от начините е да се използва background-imageсвойството CSS.

Това свойство прилага едно или повече фонови изображения към елемент, като например , както е обяснено в документацията. Използвайте го от естетически съображения, като например добавяне на текстуриран фон към вашата уеб страница.

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

Лесно е да добавите изображение, като използвате 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-tiles.png) надясно с 200 пиксела, тогава можете да видите част от него (останалото остава скрито).

Ето как изглежда, когато сглобим всичко.

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

В имота има какво да се хареса background-image. Но има и недостатък.

Изображението може да не е достъпно за всички потребители, посочва документацията, като тези, които използват екранни четци.

Това е така, защото не можете да добавите текстова информация към background-imageсобствеността. В резултат на това изображението ще бъде пропуснато от екранните четци.

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

По този начин можете да добавите текст към елемент на изображение, като използвате altатрибута, който описва изображението. Предоставеният текст ще бъде взет от екранните четци.

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

Що се отнася до изображенията, имате опции. Ако за декорация е необходимо изображение, тогава background-imageимотът може да е добър избор за вас.

Пиша за ученето да програмирам и за най-добрите начини да го направя ( amymhaddad.com).