Quelles sont les propriétés d’arrière-plan CSS ? Résumé des propriétés d'arrière-plan CSS (avec code)

L'attribut CSS background est utilisé pour définir l'arrière-plan des éléments HTML. Alors, quels sont les attributs CSS background ? Par exemple, les attributs de couleur d'arrière-plan CSS et les attributs d'arrière-plan d'image CSS appartiennent tous aux attributs d'arrière-plan CSS. Cet article résumera les attributs pertinents dans les attributs d'arrière-plan CSS.

Tout d'abord, jetons un coup d'œil aux propriétés liées au CSS :

• background-color : css définit le background color

• background-image: css pour définir l'arrière-plan de l'image

• background-repeat: css pour définir si l'image d'arrière-plan est répétée et comment le répéter

• background-position : css définit la position de l'image d'arrière-plan

• background-attachment : si l'image d'arrière-plan est fixe ou défile avec le reste de la page

• background : un attribut raccourci qui définit l'attribut background dans une instruction

Plage de element background :

L'arrière-plan remplit le contenu, le remplissage et les zones de bordure de l'élément, s'étendant jusqu'aux bords extérieurs de la bordure de l'élément (mais pas les marges). Si la bordure comporte des parties transparentes (comme une bordure en pointillés), la couleur d'arrière-plan apparaîtra à travers ces parties transparentes.

Prise en charge des navigateurs :

L'attribut background est pris en charge par tous les principaux navigateurs.

Remarque : IE7 et versions antérieures ne prennent pas en charge les valeurs « héritées » (inherit). IE8 nécessite que !DOCTYPE soit défini. IE9 prend en charge "l'héritage".

couleur d'arrière-plan CSS :

background-color l'attribut est utilisé pour définir la couleur d'arrière-plan de l'élément.

body {background-color: #b0c4de;}

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

• Hex - Par exemple : #ff0000

• RVB - tel que : rgb(255,0,0)

• Nom de la couleur - tel que : rouge

• Par défaut - sens transparent et transparent. Si un élément ne spécifie pas de couleur d'arrière-plan, l'arrière-plan est transparent.

• inherit hérite de la couleur d'arrière-plan de l'élément parent. Cela pose des problèmes de compatibilité sur IE.

css image background :

L'attribut background-image est utilisé pour définir l'image d'arrière-plan de l'élément.

Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'élément et se répète horizontalement et verticalement.

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

Astuce : La couleur d'arrière-plan et l'image d'arrière-plan peuvent coexister, veuillez définir une couleur d'arrière-plan disponible, de sorte que si l'image d'arrière-plan n'est pas disponible, la page aura toujours de bons effets visuels .

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

Valeur de l'attribut :

• aucun - Par défaut, aucune image d'arrière-plan

• url('chemin de l'image') - Le chemin accessible de l'image, vous pouvez utiliser l'adresse réseau, l'adresse du chemin relatif, l'adresse du chemin absolu

• hériter - hériter de l'élément parent

css background répétition :

Si vous avez besoin de mosaïquer l'arrière-plan, vous pouvez utiliser l'attribut background-repeat.

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

Valeur de l'attribut :

• répéter entraîne une mosaïque horizontale et verticale de l'image, par défaut.

• repeat-x et repeat-y font que l'image d'arrière-plan se répète uniquement dans le sens horizontal ou vertical respectivement.

• no-repeat ne permet pas à l'image d'être carrelée dans aucune direction.

• inherit hérite de l'élément parent.

Positionnement d'arrière-plan CSS :

L'attribut background-position est utilisé pour contrôler la position de l'image d'arrière-plan, généralement en conjonction avec background- répéter : pas de répétition ;

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

Il existe de nombreuses façons de fournir une valeur pour la propriété background-position. Tout d’abord, vous pouvez utiliser quelques mots-clés : haut, bas, gauche, droite et centre. Généralement, ces mots-clés apparaîtront par paires, mais ce n'est pas toujours le cas. Vous pouvez également utiliser une valeur de longueur telle que 100px et enfin une valeur de pourcentage.

Mots clés :

Les mots clés de placement d'images sont les plus faciles à comprendre et à faire ce que leur nom suggère. Par exemple, en haut à droite place l'image dans le coin supérieur droit de la zone de remplissage de l'élément.

Selon la spécification, les mots-clés de position peuvent apparaître dans n'importe quel ordre, à condition qu'il n'y ait pas plus de deux mots-clés, l'un correspondant à la direction horizontale et l'autre correspondant à la direction verticale en haut à droite et en haut à droite. sont équivalents.

Si un seul mot-clé apparaît, l'autre mot-clé est considéré comme central.

Pourcentage :

Les valeurs en pourcentage sont exprimées de manière plus complexe. Disons que vous souhaitez centrer une image au sein de son élément en utilisant une valeur en pourcentage :

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Si l'image est à 0% 0%, son coin supérieur gauche sera placé dans le coin supérieur gauche de l'élément. zone de rembourrage. Si la position de l'image est à 100 %, 100 % placera le coin inférieur droit de l'image dans le coin inférieur droit de la marge droite.

Positionner une image 2/3 horizontalement et 1/3 verticalement :

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 66% 33%;
}

Si seule une valeur en pourcentage est fournie, la valeur fournie sera utilisée comme valeur horizontale, la valeur verticale sera supposé être de 50 %.

Valeur de longueur :

La valeur de longueur explique le décalage du coin supérieur gauche de la zone de marge intérieure de l'élément. Le point de décalage est le coin supérieur gauche de l'image.

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

css背景固定：

background-attachment 属性设置背景图片是否固定或随页面的其余部分滚动。

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

属性值：

• scroll 默认。背景图像会随着页面其余部分的滚动而移动。

• fixed 当页面的其余部分滚动时，背景图像不会移动。

• inherit 从父元素继承。

简写属性：

background 属性在一个声明中设置所有背景属性。

body { 
    background: #00FF00 url('bgimage.gif') no-repeat fixed top;
}

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

相关文章推荐：

你不知道的CSS背景—css背景属性全解

详解css之背景background属性

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!