Comment mosaïquer une image d'arrière-plan CSS ?

Dans le passé, lors de la mise en page d'une page Web, un div ne pouvait définir qu'une seule image d'arrière-plan. Si plusieurs arrière-plans étaient définis, plusieurs div devaient être imbriqués pour obtenir une meilleure compatibilité. Si votre site Web nécessite une compatibilité avec les versions inférieures du navigateur, il est recommandé d'utiliser cette méthode. L'émergence de CSS3 résout le problème selon lequel un div ne peut définir qu'un seul arrière-plan, ce qui permet à un div de définir plusieurs images d'arrière-plan. background-image peut également définir des dégradés linéaires et d'autres effets.

Concernant l'arrière-plan de CSS3, il est très puissant et possède de nombreux attributs, tels que background-size et ainsi de suite. Vous pouvez écrire un blog sur ces attributs. Concernant les autres propriétés de css3background, j'en parlerai séparément plus tard !

Attribut d'image d'arrière-plan CSS3/CSS1

Syntaxe :

background-image：<bg-image> [ , <bg-image> ]
*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

Valeur par défaut : aucune

Valeur :

aucune : Aucune image de fond.

77b613dd11c46a1de32aff7486562a30 : spécifiez une image d'arrière-plan à l'aide d'une adresse absolue ou relative.

33e24773e66574b6def6c8d2ea108fc3 : créez une image d'arrière-plan à l'aide d'un dégradé linéaire. (CSS3)

ac6918b5246240a756e60820af071212 : Créez une image d'arrière-plan en utilisant un dégradé radial (radial). (CSS3)

< repeating-linear-gradient> : Créez une image d'arrière-plan en utilisant un dégradé linéaire répétitif. (CSS3)

< Repeating-radial-gradient> : Créez une image d'arrière-plan en utilisant un dégradé radial (radial) répétitif. (CSS3)

Description :

définit ou récupère l'image d'arrière-plan de l' objet .

Si background-image est défini, il est également recommandé à l'auteur de définir background-color pour maintenir un certain contraste avec le texte lorsque l'image d'arrière-plan est invisible. La fonctionnalité de script correspondante de

est backgroundImage.

Comment étirer l'image d'arrière-plan pour remplir l'écran en CSS

Le code CSS que j'ai écrit est

#bg
{
width: 100%;
height: 100%;
background:url(images/beijing.png);
}

De cette façon, il répétera le image pour remplir l'écran, je veux qu'il étire l'image pour couvrir l'écran, comment dois-je l'écrire ?

background:url(images/beijing.png) repeat;

Ajouter un attribut

background-size:100%;background:url(images/beijing.png) no-repeat;

Ajouter un attribut background-size:100%;background:url(images/beijing.png) no-repeat ; L'image sera déformée !

Soit le cadre extérieur est limité, réglez-le à 100%. Je l'ai testé ici et il est plein. Vous pouvez voir s'il y a d'autres attributs qui l'affectent.

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!