CSS-taustakuva - Kuinka lisätä kuvan URL-osoite div

Oletetaan, että haluat laittaa kuvan tai kaksi verkkosivulle. Yksi tapa on käyttää background-imageCSS-ominaisuutta.

Tämä ominaisuus käyttää yhtä tai useampaa taustakuvaa elementtiin, kuten a , kuten dokumentaatio kertoo. Käytä sitä esteettisistä syistä, kuten teksturoidun taustan lisääminen verkkosivullesi.

Lisää kuva

Kuvan lisääminen background-imageomaisuudella on helppoa . Anna vain polku kuvan url()arvoon.

Kuvan polku voi olla URL-osoite, kuten alla olevassa esimerkissä esitetään:

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

Tai se voi olla paikallinen polku. Tässä on esimerkki:

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

Lisää useita kuvia

Voit lisätä background-imageomaisuuteen useita kuvia .

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; } 

Se on paljon koodia. Hajotetaan se.

Erota kukin kuvan url()arvo pilkulla.

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

Sijoita ja paranna kuviasi lisäämällä lisäominaisuuksia.

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

Voit lisätä taustakuviin useita aliominaisuuksia, kuten background-repeatja background-position, joita käytimme yllä olevassa esimerkissä. Voit jopa lisätä kaltevuuksia taustakuvaan.

Katso miltä se näyttää, kun laitamme kaiken yhteen.

Tilaa asiat

Kuvien luettelointijärjestys pinoamisjärjestyksen vuoksi. Tämä tarkoittaa, että ensimmäinen lueteltu kuva on lähinnä käyttäjää, dokumentaation mukaan. Sitten seuraava ja seuraava ja niin edelleen.

Tässä on esimerkki.

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; } 

Olemme listanneet kaksi kuvaa yllä olevaan koodiin. Ensimmäinen kuva (morocco-blue.png) on ​​toisen edessä (oriental-tiles.png). Molemmat kuvat ovat samankokoisia ja puuttuvia, joten näemme vain ensimmäisen kuvan.

Mutta jos siirrämme toisen kuvan (oriental-tiles.png) oikealle 200 pikselillä, näet osan siitä (loput jäävät piiloon).

Näin näyttää, kun laitamme kaiken yhteen.

Milloin sinun tulisi käyttää taustakuvaa?

Kiinteistössä on paljon pidettävää background-image. Mutta siinä on haittapuoli.

Kuva ei välttämättä ole kaikkien käyttäjien saatavilla, dokumentaatio osoittaa, kuten ne, jotka käyttävät näytönlukijoita.

Tämä johtuu siitä, että et voi lisätä tekstitietoja background-imageomaisuuteen. Seurauksena on, että näytön lukijat jättävät kuvan väliin.

Käytä background-imageomaisuutta vain, kun sinun on lisättävä sivulle koristeita. Muussa tapauksessa käytä HTML- elementtiä, jos kuvalla on merkitys tai tarkoitus, kuten dokumentaatiossa todetaan.

Tällä tavoin voit lisätä tekstiä kuvaelementtiin käyttämällä kuvaa kuvaavaa altmääritettä. Näytönlukijat noutavat toimitetun tekstin.

Ajattele sitä tällä tavalla: background-imageon CSS-ominaisuus ja CSS keskittyy esitykseen tai tyyliin; HTML keskittyy semantiikkaan tai merkitykseen.

Mitä tulee kuviin, sinulla on vaihtoehtoja. Jos kuvaa tarvitaan koristeluun, background-imagekiinteistö voi olla hyvä valinta sinulle.

Kirjoitan ohjelmoinnin oppimisesta ja parhaista tavoista edetä siinä ( amymhaddad.com).