Latest web development tutorials

Sfondi CSS (sullo sfondo)

proprietà dello sfondo CSS sono usati per definire lo sfondo di elementi HTML.

proprietà CSS definiscono gli effetti di sfondo:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Colore di sfondo

proprietà background-color definisce il colore dell'elemento sfondo.

Il colore di sfondo della pagina da utilizzare nel selettore corpo:

Esempi

body {background-color:#b0c4de;}

Prova »

CSS, i valori di colore sono solitamente definita nel modo seguente:

  • Hex - come ad esempio: "# ff0000"
  • RGB - come ad esempio: "rgb (255,0,0)"
  • nomi dei colori - come ad esempio: "rosso"

Nell'esempio seguente, h1, p, e gli elementi div hanno diversi colori di sfondo:

Esempi

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Prova »

immagine di sfondo

attributo background-image descrive gli elementi dell'immagine di sfondo.

Per impostazione predefinita, l'immagine di sfondo è piastrellato ripetutamente visualizzato per coprire l'intera entità elemento.

Pagina esempi di impostazione immagine di sfondo:

Esempi

body {background-image:url('paper.gif');}

Prova »

Ecco un esempio di una pessima combinazione di immagine di sfondo del testo e. Testo scarsa leggibilità:

Esempi

body {background-image:url('bgdesert.jpg');}

Prova »

Le immagini di sfondo - piastrelle orizzontale o verticale

Per impostazione predefinita, la proprietà background-image è piastrellato con orientamento orizzontale o verticale della pagina.

Se alcune immagini affiancate orizzontalmente e verticalmente, quindi sembra molto coordinato, come segue:

Esempi

body
{
background-image:url('gradient2.png');
}

Prova »

Se una tessera immagine (repeat-x), solo in direzione orizzontale, lo sfondo della pagina sarà migliore:

Esempi

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Prova »

piastrelle Imposta la posizione e non - Immagine di sfondo

osservazione Lasciate che l'immagine di sfondo non influenza il layout del testo

Se non si desidera che il gruppo di immagini, è possibile utilizzare la proprietà background-repeat:

Esempi

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Prova »

L'esempio di cui sopra, l'immagine di sfondo e il testo appare nella stessa posizione, al fine di rendere il layout di pagina più ragionevole, non pregiudica la lettura del testo, siamo in grado di cambiare la posizione dell'immagine.

proprietà background-posizione può essere usato per cambiare l'immagine sullo sfondo qui:

Esempi

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Prova »

Background - proprietà abbreviata

Nel precedente esempio, si può vedere il colore di sfondo della pagina attraverso un sacco di attributi da controllare.

Per semplificare il codice per queste proprietà, possiamo utilizzare questi attributi sono combinati nella stessa struttura.

colore di sfondo proprietà scorciatoia per il "background":

Esempi

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Prova »

Quando si utilizza la proprietà abbreviata, l'ordine dei valori degli attributi come ::

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Tutti questi attributi non hanno bisogno di usare, è possibile utilizzare in base alle esigenze reali della pagina.

Questo esempio utilizza CSS descritto in precedenza, è possibile visualizzare l'istanza: Esempi CSS

Esempi

Altri esempi

Come impostare un'immagine di sfondo fisso
Questo esempio mostra come impostare un'immagine di sfondo fisso. Immagine non scorrere con il resto della pagina.

proprietà dello sfondo CSS

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。