ЦСС слика у позадини - Како додати УРЛ слике у свој одељак

Рецимо да желите да поставите слику или две на веб страницу. Један од начина је коришћење background-imageсвојства ЦСС.

Ово својство примењује једну или више позадинских слика на елемент, као што је а , како објашњава документација. Користите га из естетских разлога, као што је додавање текстурне позадине на вашу веб страницу.

Додајте слику

Лако је додати слику користећи background-imageсвојство. Само наведите пут до слике у 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; } 

У горњем коду смо навели две слике. Прва слика (мороццо-блуе.пнг) биће испред друге (оријенталне плочице.пнг). Обе слике су исте величине и немају прозирност, тако да видимо само прву слику.

Али ако другу слику (ориентал-плочице.пнг) померимо удесно за 200 пиксела, тада можете видети део слике (остатак остаје скривен).

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

Када треба да користите позадинску слику?

background-imageИмање се може много тога свидети . Али постоји недостатак.

Слика можда неће бити доступна свим корисницима, истиче се у документацији, попут оних који користе читаче екрана.

То је зато што не можете да додате текстуалне информације у background-imageсвојство. Као резултат, читачи екрана ће пропустити слику.

Користите background-imageсвојство само када је потребно да додате украс на своју страницу. У супротном, користите ХТМЛ елемент ако слика има значење или сврху, како напомиње документација.

На тај начин можете додати текст елементу слике помоћу altатрибута који описује слику. Наведени текст ће преузети читачи екрана.

Замислите то овако: background-imageје ЦСС својство, а ЦСС се фокусира на презентацију или стил; ХТМЛ се фокусира на семантику или значење.

Што се тиче слика, имате могућности. Ако је за украшавање потребна слика, онда је background-imageимање можда добар избор за вас.

Пишем о учењу програмирања и најбољим начинима за то ( амимхаддад.цом).