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:
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
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:
Voici un exemple d'une mauvaise combinaison de texte et de l'image d'arrière-plan. Texte mauvaise lisibilité:
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:
Si une mosaïque d'images (repeat-x) que dans le sens horizontal, le fond de page sera mieux:
Image de fond - La position et non la tuile
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:
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
{
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":
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
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 | 设置背景图像是否及如何重复。 |