Tutoriel CSS3 (5) : Fond de page Web image_css3_CSS_Production de pages Web

Production de pages Web Introduction à l'article Webjx : Les images/textures d'arrière-plan peuvent être utilisées de plusieurs manières et sont souvent utilisées pour ajouter la meilleure embellissement final du site Web. Maintenant que cela est pris au sérieux dans CSS3, nous pouvons appliquer plusieurs images d'arrière-plan et tailles d'image d'arrière-plan pour obtenir des effets plus parfaits. Les images/textures d’arrière-plan peuvent être utilisées de nombreuses manières et sont souvent utilisées pour ajouter la meilleure embellissement final à un site Web. Maintenant que cela est pris au sérieux dans CSS3, nous pouvons appliquer plusieurs images d'arrière-plan et tailles d'image d'arrière-plan pour obtenir des effets plus parfaits.

Les images/textures d'arrière-plan peuvent être utilisées de nombreuses façons et sont souvent utilisées pour ajouter la meilleure embellissement final à un site Web. Maintenant que cela est pris au sérieux dans CSS3, nous pouvons appliquer plusieurs images d'arrière-plan et tailles d'image d'arrière-plan pour obtenir des effets plus parfaits.

Article précédent : Tutoriel CSS3 (4) : Bordures de page Web et ombres de texte de page Web
La taille de l'image d'arrière-plan en CSS3 peut être écrite comme background-size:Apx Bpx;
-Apx = x- axis (largeur de l'image)
-Bpx = y-axis (hauteur de l'image)
Comprenant cela, commençons à découvrir cette fonctionnalité :
Les meilleurs navigateurs prenant en charge la taille d'arrière-plan CSS3 sont Safari et Opera, nous vous devez utiliser le préfixe -o et -webkit. Taille de l'arrière-plan

#backgroundSize{ border : 5px solid #bd9ec4; background:url(image_1.extention) en bas à droite sans répétition ; -o-background-size : 150px 250px ; -webkit-background-size : 150px 250px ; remplissage : 15px 25px ; hauteur : hériter ; largeur : 590px ; } Support du navigateur :

Firefox(3.05…)

Google Chrome (1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)

Afin d'appliquer plusieurs images d'arrière-plan en CSS3, nous utilisons une séparation facile, par exemple :

background: url(image_1.extention) top right no-repeat, url( image_2 .extention) en bas à droite sans répétition ;

#backgroundMultiple{ border : 5px solid background:url(image_1.extention) en haut à gauche sans répétition, url ( image_2.extention) en bas à gauche sans répétition, url(image_3.extention) en bas à droite sans répétition ; remplissage : 15px 25px ; hauteur : hériter ; largeur : 590px ; } Support du navigateur :

Firefox( 3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)

Ce qui précède est le contenu du tutoriel CSS3 (5) : Arrière-plan de la page Web image_css3_CSS_ Production de pages Web, plus connexes Veuillez payer attention au site PHP chinois (www.php.cn) pour le contenu !