CSS3 Fond
CSS3 contient quelques nouvelles propriétés d'arrière-plan, ce qui permet un meilleur contrôle de l'élément de fond.
Dans ce chapitre, vous apprendrez comment ajouter plusieurs images de fond à un seul élément.
Vous pourrez également en apprendre davantage sur les nouvelles propriétés CSS3 suivantes:
-
background-size -
background-origin -
background-clip
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit-, -moz- ou -o- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 Fond multiples
CSS3 vous permet d'ajouter plusieurs images d'arrière - plan pour un élément, à travers le background-image propriété.
Les différentes images d'arrière-plan sont séparés par des virgules, et les images sont empilées les unes sur les autres, où la première image est plus proche du spectateur.
L'exemple suivant présente deux images d'arrière-plan, la première image est une fleur (aligné sur le fond et à droite) et la deuxième image est un fond de papier (aligné sur le coin en haut à gauche):
Exemple
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} Essayez - le vous - même » Plusieurs images de fond peuvent être spécifiées en utilisant soit les propriétés de fond individuelles (comme ci - dessus) ou l' background - background propriété raccourcie.
L'exemple suivant utilise l' background - background propriété raccourcie (même résultat que l' exemple ci - dessus):
Exemple
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Essayez - le vous - même » CSS3 Contexte Taille
Le CSS3 background-size propriété vous permet de spécifier la taille des images d'arrière - plan.
Avant CSS3, la taille d'une image d'arrière-plan est la taille réelle de l'image. CSS3 nous permet de réutiliser les images de fond dans des contextes différents.
La taille peut être spécifiée dans des longueurs, des pourcentages, ou en utilisant l'un des deux mots-clés: contiennent ou couverture.
L'exemple suivant redimensionne une image d'arrière-plan beaucoup plus petits que l'image d'origine (en utilisant pixels):
image de fond d'origine:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Redimensionnée image de fond:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Voici le code:
Exemple
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Essayez - le vous - même » Les deux autres valeurs possibles pour background-size sont contain et cover .
Le contain mot - clé redimensionne l'image de fond pour être aussi grand que possible (mais à la fois sa largeur et sa hauteur doit tenir dans la zone de contenu). En tant que tel, en fonction des proportions de l'image d'arrière-plan et la zone de positionnement de l'arrière-plan, il peut y avoir certaines zones du fond qui ne sont pas couvertes par l'image d'arrière-plan.
Le cover mot - clé redimensionne l'image d'arrière - plan de sorte que la zone de contenu est complètement recouvert par l'image d'arrière - plan ( à la fois sa largeur et sa hauteur sont égales ou supérieures à la zone de contenu). Par conséquent, certaines parties de l'image d'arrière-plan ne peut pas être visible dans la zone de positionnement de fond.
L'exemple suivant illustre l'utilisation de contain et de cover :
Exemple
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Essayez - le vous - même » Définir les tailles de plusieurs images d'arrière-plan
Le background-size propriété accepte également plusieurs valeurs pour la taille de l' arrière - plan ( en utilisant une liste séparée par des virgules), lorsque l'on travaille avec de multiples origines.
L'exemple suivant a trois images d'arrière - plan spécifié, avec différents background-size valeur pour chaque image:
Exemple
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} Essayez - le vous - même » Full Size Image de fond
Maintenant, nous voulons avoir une image de fond sur un site Web qui couvre la fenêtre du navigateur à tout moment.
Les exigences sont les suivantes:
- Remplir la page entière avec l'image (sans espace blanc)
- Image d'échelle au besoin
- Centrer l'image sur la page
- Ne pas provoquer scrollbars
L'exemple suivant montre comment le faire; Utilisez l'élément html (l'élément html est toujours au moins la hauteur de la fenêtre du navigateur). Réglez ensuite un fond fixe et centrée sur elle. Ensuite , ajuster sa taille avec le background-size propriété:
Exemple
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} Essayez - le vous - même » CSS3 background-origin Propriété
Le CSS3 background-origin propriété spécifie où l'image d'arrière - plan est positionné.
La propriété prend trois valeurs différentes:
- border-box - l'image de fond commence à partir du coin supérieur gauche de la frontière
- padding-box - (par défaut) l'image de fond commence à partir du coin supérieur gauche du bord de rembourrage
- content-box - l'image de fond commence à partir du coin supérieur gauche du contenu
L'exemple suivant illustre le background-origin propriété:
Exemple
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Essayez - le vous - même » CSS3 background-clip propriété
Le CSS3 background-clip propriété spécifie la zone de peinture de l'arrière - plan.
La propriété prend trois valeurs différentes:
- border-box - (par défaut) l'arrière - plan est peint sur le bord extérieur de la frontière
- padding-box - l'arrière - plan est peinte sur le bord extérieur du rembourrage
- content-box - l'arrière - plan est peint à l'intérieur de la zone de contenu
L'exemple suivant illustre le background-clip propriété:
Exemple
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
Propriétés CSS3 Contexte
| Propriété | La description |
|---|---|
| background | Un raccourci pour définir toutes les propriétés d'arrière-plan dans une déclaration |
| background-clip | Indique la zone de peinture de l'arrière-plan |
| background-image | Indique une ou plusieurs images d'arrière-plan pour un élément |
| background-origin | Indique où l'image (s) de fond est / sont positionnés |
| background-size | Indique la taille de l'image d'arrière-plan (s) |