Comment définir les propriétés d'arrière-plan en CSS (explication détaillée)

Cet article vous donnera une explication détaillée de la façon de définir les attributs d'arrière-plan en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Les attributs liés à l'arrière-plan comprennent principalement :

• couleur d'arrière-plan couleur d'arrière-plan

• image d'arrière-plan image d'arrière-plan

• background-repeat S'il faut répéter la mosaïque (carrelage par défaut) | répéter-x (carrelage horizontal) | répéter-y (carrelage vertical) | >

background-position background position length (pourcentage) | position (bouton supérieur central gauche droite) Généralement, les deux méthodes sont utilisées ensemble Si une direction est spécifiée et que l'autre direction est par défaut centrée, les deux méthodes peuvent. également être mélangés et assortis. Il n'y a pas de distinction d'ordre dans les noms positionnels, mais il y a toujours un ordre lors de l'utilisation de pourcentages, d'abord horizontalement puis verticalement
background-attachment L'arrière-plan est fixe ou défilement défilement fixe
arrière-plan : couleur d'arrière-plan, image d'arrière-plan, mosaïque, arrière-plan fixe ou défilant, position de l'arrière-plan

Si vous souhaitez que l'arrière-plan soit être translucide, utilisez rgba( r, g b ,a lors de la spécification de la couleur), un moyen de spécifier la transparence

  #p1 {
            width: 300px;
            height: 300px;
            background-color: blue;            /*默认是transparent透明的*/
            /* background-color: transparent; */
            background-image: url(Images/2.jpg);
            background-repeat: no-repeat;            /*不平铺，默认是水平垂直平铺*/
            /* background-repeat: repeat-y; */
            /* background-repeat:  repeat-x; */
            /* background-position: right bottom; */
            background-position: 10% center;
            background-attachment: fixed;
        }

Lorsque vous souhaitez utiliser plusieurs images d'arrière-plan, utilisez background pour spécifier plusieurs URL. Utilisez '. ,' des virgules pour séparer chaque groupe. Si les images se chevauchent, la première recouvre l'image suivante, mais la couleur globale de l'arrière-plan doit être spécifiée après la dernière URL.

p {
            width: 100%;
            height: 300px;
            background-color: rgba(0, 0, 0, 0.6);
        }

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le

p {
            width: 100%;
            height: 300px;
            background: url(Images/2.jpg) no-repeat left top, url(Images/3.jpg) no-repeat right bottom blue;
        }

Tutoriel vidéo sur les bases CSS

, Tutoriel vidéo CSS3  !

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!