English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The CSS background-position attribute sets the element'sbackground-imageThe initial position (i.e., the origin). Use the shorthandBackgroundThe attribute is usually more convenient.
The following table summarizes the usage context and version history of this attribute.
| Default value: | 0% 0% |
|---|---|
| Applies to: | All elements |
| Inheritance: | None |
| Animatable: | Yes.Please refer to Animation properties. |
| Version: | CSS 1, 2, 3 |
| JavaScript syntax: | object object.style.backgroundPosition="center" |
The syntax of this attribute is as follows:
background-position: [ percentage | length | left | center | right ] 1 or 2 values | initial | inherit
Esempio seguente dimostra come utilizzare la proprietà background-position.
p {
background-image: url("images/smiley.png");
background-position: 50% center;
}Testa per </>Attenzione:Se si specifica solo un valore, si assume che il secondo valore sia centrale. Se si utilizzano due valori e almeno uno non è una parola chiave, il primo valore rappresenta la posizione orizzontale, il secondo valore rappresenta la posizione verticale.
La tabella seguente descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| bottom | Corrisponde al 100% della posizione verticale. |
| center | Se non altrimenti specificato, è uguale al 50% della posizione orizzontale, altrimenti viene fornita la posizione verticale del 50%. |
| left | Corrisponde al 0% della posizione orizzontale. |
| right | Corrisponde al 100% della posizione orizzontale. |
| top | La posizione verticale è uguale a 0%. |
| length | Lunghezza in pixel effettivi. Ad esempio, utilizzando il valore '10px 20px', l'angolo in alto a sinistra dell'immagine si trova 10px a destra della scatola dell'elemento e 20px sotto l'angolo in alto a sinistra della scatola. |
| percentage | Percentuale della dimensione dell'elemento. Ad esempio, utilizzando il valore '0% 0%', l'angolo in alto a sinistra dell'immagine si allinea con l'angolo in alto a sinistra della scatola dell'elemento. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore calcolato dell'attributo background-position dell'elemento padre. |
Compatibilità dei browser per la proprietà background-position, tutti i browser principali supportano questa proprietà.
|
Si prega di consultare la seguente guida:CSS sfondo,CSS3 sfondo.
Proprietà correlate:background,background-attachment,background-color,background-clip,background-image,background-origin,background-repeat,background-size.