CSS background-position ominaisuus

Määrittely ja käyttö

background-position Ominaisuus asettaa taustakuvan alkuperäisen sijainnin.

Tämä ominaisuus asettaa alkuperäisen taustakuvan ( background-image Määrittelyn sijainnissa, jos taustakuvaa halutaan toistaa, se alkaa tästä kohdasta.

Vinkki:Sinun täytyy asettaa background-attachment ominaisuus arvoksi "fixed，jotta varmistetaan, että ominaisuus toimii oikein Firefoxissa ja Operassa.

Katso myös:

CSS oppitunti:CSS tausta

CSS viittausoppas:background-image ominaisuus

HTML DOM viittausoppas:backgroundPosition ominaisuus

esimerkki

Miten taustakuvaa voidaan sijoittaa:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Kokeile itse

CSS kieli

background-position: arvo;

ominaisuusarvo

arvo kuvaus
  • ylävasen vasen
  • yläkeskitetty
  • ylävasen oikea
  • keskitetty vasen
  • keskitetty keskitetty
  • keskitetty oikea
  • alavasen vasen
  • alavasen keskitetty
  • alavasen oikea

Jos määrittelet vain yhden avainsanan, toinen arvo on "center".

Oletusarvo: 0% 0%.
x% y%

Ensimmäinen arvo on horisontaalinen sijainti, toinen arvo on vertikaalinen sijainti.

Ylävasen kulma on 0% 0%. Alavasen kulma on 100% 100%.

Jos määrittelet vain yhden arvon, toinen arvo on 50%.
xpos ypos

Ensimmäinen arvo on horisontaalinen sijainti, toinen arvo on vertikaalinen sijainti.

Ylävasen kulma on 0 0. Yksiköt ovat pikseleitä (0px 0px) tai muita CSS-yksiköitä.

Jos määrittelet vain yhden arvon, toinen arvo on 50%.

Voit sekoittaa % ja position arvoja.

Tekninen tarkistus

Oletusarvo: 0% 0%
Perintä: ei
Versio: CSS1
JavaScript kieli: object.style.backgroundPosition="center"

Lisää esimerkkejä

Miten taustakuvaa voidaan sijoittaa %:lla
Tämä esimerkki näyttää, miten taustakuvaa voidaan sijoittaa sivulle käyttämällä prosentteja.
Miten taustakuvaa voidaan sijoittaa pikseleillä
Tämä esimerkki näyttää, miten taustakuvaa voidaan sijoittaa sivulle käyttämällä pikseleitä.

Selaimen tuki

Taulukossa olevat numerot antavat tiedon ensimmäisestä selaimesta, joka tukee ominaisuutta täysin.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5