Maison > interface Web > tutoriel HTML > le corps du texte

Implémentation de plusieurs arrière-plans en partageant des exemples CSS3

陈政宽~
Libérer: 2017-06-28 14:06:15
original
1727 Les gens l'ont consulté

Tout le monde devrait être familier avec l'attribut d'arrière-plan background-image Dans CSS2, ses attributs associés incluent background-repeat (comment définir si l'arrière-plan est répété et comment répéter. it) ), background-position (définir la position de l'image d'arrière-plan dans le conteneur), background-attachment (définir si l'arrière-plan défile avec la page), utilisez ces attributs pour contrôler la position de l'image d'arrière-plan dans le conteneur Comment l'afficher dans le conteneur, mais nous ne pouvons fournir qu'une seule image d'arrière-plan pour le conteneur Si nous voulons utiliser plusieurs images pour l'arrière-plan d'un conteneur, comment devons-nous procéder ? Ajouter des éléments inutiles au conteneur ?

La naissance de CSS3 a résolu ce problème pour nous. Dans CSS3, plusieurs images d'arrière-plan peuvent être définies pour un conteneur via background-image ou background, ce qui signifie que différentes images d'arrière-plan peuvent être placées dans une seule à l'intérieur du conteneur. élément de bloc.

Jetons d'abord un coup d'œil à la syntaxe :

background : [background-image] | [ background-repeat] | [background-size] | [background-attachment] | [background-position]Utilisez des virgules pour séparer les URL de plusieurs images d'arrière-plan. , s'il y a plusieurs images d'arrière-plan et qu'il n'y a qu'un seul autre attribut (par exemple, il n'y a qu'une seule répétition d'arrière-plan), alors cette valeur d'attribut sera appliquée à toutes les images d'arrière-plan.

Regardons un exemple :

Ici, nous voulons utiliser 5 images comme arrière-plan d'un conteneur p :

Code HTML. :


Le code est le suivant :

Script House




Code CSS :


Codez comme suit :

.p1{

margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;

image d'arrière-plan:url(images/1.jpg),url(images/2.jpg),url(images/3.jpg),url(images/4.jpg),url(images/5 .jpg) ;
background-repeat : pas de répétition, pas de répétition, pas de répétition, pas de répétition, pas de répétition ;
background-position : haut à gauche, haut à droite, bas à gauche, bas à droite, centre centre ;
}


L'effet est le suivant :

Implémentation de plusieurs arrière-plans en partageant des exemples CSS3

Dans le code ci-dessus il y a cette phrase :
Implémentation de plusieurs arrière-plans en partageant des exemples CSS3


Le code est le suivant :

background-repeat:no-repeat;



Écrivez simplement une valeur, l'effet est exactement pareil.

Bien sûr, lors de la définition des différents attributs de l'image de fond ci-dessus, ils sont écrits séparément, nous pouvons donc également écrire les différents attributs de l'image de fond ensemble. Dans ce cas, le code CSS est le suivant :


Le code est le suivant :

.p1{

...
background:url(images/1. jpg) pas de répétition en haut à gauche,
url (images/2.jpg) pas de répétition en haut à droite,
url(images/3.jpg) pas de répétition en bas à gauche,
url(images/4 .jpg) sans répétition en bas à droite,
url(images/5.jpg) sans répétition centre centre;
...
}


Oh, c'est comme ça CSS3 plusieurs arrière-plans fonctionnent, c'est très simple. Le code source complet et des exemples sont fournis ci-dessous, qui peuvent être utilisés comme référence.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!