Réaliser des transformations 2D avec CSS3
Arrière-plans de CSS3
CSS3 cours tutorialPrise en charge des navigateurs
Propriété |
Appui de navigateur |
||||
---|---|---|---|---|---|
background-size |
|
|
|
|
|
background-origin |
|
|
|
|
|
Internet Explorer 9 et +, Firefox, Chrome, Safari et Opera soutiennent les nouvelles propriétés de l'arrière-plan.
CSS3 La propriété background-size
La propriété background-size spécifie la taille de l'image d'arrière-plan.
Et donc la propriété background-size permet de contrôler la taille de l’image d’arrière plan.
Avant CSS3, la taille de l'image de fond était déterminée par la taille réelle de l'image. Dans CSS3 Il est possible de spécifier la taille de l'image de fond, ce qui permet de réutiliser les mêmes images d'arrière-plan dans des contextes différents.
Vous pouvez spécifier la taille en pixels ou en pourcentage. Si vous indiquez la taille, la taille dépend de la largeur et la hauteur de l'élément parent.
Voici l’image origine utilisée dans l’exemple 1 et 2 qui suivent
Exemple 1 Redimensionner une image d'arrière-plan :
Exemple : 📋 Copier le code
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>background</title> <style> body { background:url(https://www.oujood.com/css3/images/arbre.gif); background-size:80px 60px; background-repeat:repeat-x; padding-top:90px; } </style> </head> <body> <p>l'image d'origine: <img src="https://www.oujood.com/css3/images/arbre.gif" alt="Fleurs" width="224" height="162"></p> </body> </html>
Exemple 2 Étirer l'image d'arrière-plan pour remplir complètement la zone de contenu :
Exemple : 📋 Copier le code
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>background</title> <style> body { background:url(https://www.oujood.com/css3/images/arbre.gif); background-size:100% 100%; background-repeat:no-repeat; min-height:30em; } </style> </head> <body> </body> </html>
CSS3 La propriété background-origin
La propriété background-origin spécifie la zone de positionnement des images d'arrière-plan.
La propriété background-origin a été introduite dans CSS3 pour la définition de l'aire de positionnement d'un élément d'arrière-plan.
La propriété background-origin vous permet de spécifier si l'arrière-plan sera positionné par rapport à la zone de "contenue", la zone " frontière" ou la zone de "padding".
Exemple Position de l'image d'arrière-plan dans la zone de contenu :
Exemple : 📋 Copier le code
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>background</title> <style> div { width:30em; border:5px solid #00ffff; margin-top:2em; padding:25px; background-image:url('https://www.oujood.com/css3/images/regular-smile.gif'); background-repeat:no-repeat; background-position:left; } #div1 { background-origin:border-box; } #div2 { background-origin:padding-box; } #div3 { background-origin:content-box; } </style> </head> <body> <div id="div1"><p>background-origin:border-box:</p> <p>Tien voici un texte pour le remplissage du paragraphe. Un texte de remplissage est seulement un texte de remplissage. Il est là pour donner un contenu au paragraphe.</p> </div> <div id="div2"><p>background-origin:padding-box:</p> <p>Tien voici un texte pour le remplissage du paragraphe. Un texte de remplissage est seulement un texte de remplissage. Il est là pour donner un contenu au paragraphe.</p> </div> <div id="div3"><p>background-origin:content-box:</p> <p>Tien voici un texte pour le remplissage du paragraphe. Un texte de remplissage est seulement un texte de remplissage. Il est là pour donner un contenu au paragraphe.</p> </div> </body> </html>
CSS3 Plusieurs Images d’arrière plans
CSS3 vous permet d'utiliser plusieurs images d'arrière-plan pour un élément.
Exemple Définissez deux images d'arrière-plan de l'élément body :
Exemple : 📋 Copier le code
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>background</title> <style> body { background-image:url(https://www.oujood.com/css3/images/fleurs1.gif),url(https://www.oujood.com/css3/images/arbre.gif); } </style> </head> <body> </body> </html>Par carabde 10 mars 2014
chapitre précédent chapitre suivant