Latest web development tutorials

Fond CSS (en arrière-plan)

propriétés CSS de base sont utilisés pour définir l'arrière-plan des éléments HTML.

propriétés CSS définissent les effets de fond:

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

Couleur de fond

propriété background-color définit la couleur de l'élément de fond.

La couleur de fond de la page à utiliser dans le sélecteur de corps:

Exemples

body {background-color:#b0c4de;}

Essayez »

CSS, les valeurs de couleur sont généralement définis de la manière suivante:

  • Hex - tels que: "# FF0000"
  • RGB - tels que: "rgb (255,0,0)"
  • Les noms de couleur - tels que: "rouge"

L'exemple, h1, p, et les éléments div suivants ont des couleurs de fond:

Exemples

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

Essayez »

Image de fond

attribut background-image décrit les éléments de l'image d'arrière-plan.

Par défaut, l'image de fond est carrelé à plusieurs reprises affiché pour couvrir l'entité élément entier.

Page des exemples de réglage de l'image d'arrière-plan:

Exemples

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

Essayez »

Voici un exemple d'une mauvaise combinaison de texte et de l'image d'arrière-plan. Texte mauvaise lisibilité:

Exemples

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

Essayez »

Les images de fond - mosaïque horizontale ou verticale

Par défaut, la propriété background-image est carrelée en orientation horizontale ou verticale de la page.

Si certaines images carrelées horizontalement et verticalement, de sorte qu'il semble très coordonnée, comme suit:

Exemples

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

Essayez »

Si une mosaïque d'images (repeat-x) que dans le sens horizontal, le fond de page sera mieux:

Exemples

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

Essayez »

Image de fond - La position et non la tuile

remarque Que l'image d'arrière-plan ne modifie pas la mise en page de texte

Si vous ne voulez pas la tuile d'image, vous pouvez utiliser la propriété background-repeat:

Exemples

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

Essayez »

L'exemple ci-dessus, l'image d'arrière-plan et le texte apparaît dans le même endroit, afin de rendre la mise en page plus raisonnable, ne pas affecter la lecture du texte, nous pouvons changer l'emplacement de l'image.

propriété background-position peut être utilisée pour changer l'image en arrière-plan ici:

Exemples

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

Essayez »

Contexte - propriété raccourcie

Dans l'exemple ci-dessus, nous pouvons voir la couleur de la page d'arrière-plan par un grand nombre d'attributs pour contrôler.

Pour simplifier le code pour ces propriétés, nous pouvons utiliser ces attributs sont combinés dans la même propriété.

Sténographie couleur propriété de fond pour le "fond":

Exemples

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

Essayez »

Lorsque vous utilisez la propriété raccourcie, l'ordre des valeurs d'attribut comme ::

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

Tous ces attributs ne doivent pas utiliser, vous pouvez utiliser en fonction des besoins réels de la page.

Cet exemple utilise CSS décrit précédemment, vous pouvez visualiser l'instance: CSS Exemples

Exemples

D'autres exemples

Comment définir une image fixe d'arrière - plan
Cet exemple montre comment définir une image de fond fixe. L'image ne défile pas avec le reste de la page.

propriétés CSS de fond

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