CSS: lisää kuva - niin se toimii
Tässä käytännöllisessä kärjessä selitetään kuinka kuva lisätään CSS: n avulla. Periaatteessa kuvia voidaan lisätä tähän vain taustakuvien muodossa. Se on kuitenkin täysin riittävä.
Lisää kuva CSS: ään
Jos esimerkiksi haluat sisällyttää kuvan otsikkoon CSS: n avulla, kuten logosi, ilmoita seuraavat ominaisuudet #header-kohdassa:
- "tausta: url (image.webp) #FFFFFF;"
- Tässä "bild.webp" ymmärretään kuvan URL-osoitteena joko css-tiedoston suhteen tai aseman absoluuttisena osoitteena.
- Värin kanssa, jonka ilmoitat taustaväriksi verkkosivustollasi.
- Kuva voidaan nyt sijoittaa tarkkaan sijaintiin, kuten: "tausta-asema: 100px 100px;" tai ikkunan reunan määrittämien suhteellisten tietojen avulla, kuten "tausta-asema: alhaalla oikealla".
- Jotta kuva ei toistu jatkuvasti, voit määrittää "ei toista" -kohdan "taustatoista" -kohdan alle. Se näyttää tältä: "taustatoista: ei toista;".
- Ominaisuuden "tausta-liite" avulla voit määrittää, liikkuu kuva vierittäessä vai pysyykö se kiinteässä paikassa sivulla: "tausta-liite: kiinteä;".
- Ominaisuudet määritetään CSS-tiedostossa ilman lainausmerkkejä.
Lue seuraavasta käytännöllisestä vinkki: miten integroida CSS-tiedosto HTML: n avulla.