CSS
Arrière-plans
Recherche…
Introduction
Avec CSS, vous pouvez définir les couleurs, les dégradés et les images comme arrière-plan d'un élément.
Il est possible de spécifier différentes combinaisons d'images, de couleurs et de dégradés, et d'ajuster la taille, le positionnement et la répétition (entre autres).
Syntaxe
- couleur de fond: couleur | transparent | initiale | hériter;
- background-image: url | aucun initiale | hériter;
- background-position: valeur;
- taille d'arrière-plan: <bg-size> [<bg-size>]
- <bg-size>: auto | longueur | couverture | contenir | initiale | hériter;
- répétition d'arrière-plan: répéter | repeat-x | répétition-y | pas de répétition | initiale | hériter;
- background-origine: padding-box | border-box | box de contenu | initiale | hériter;
- background-clip: border-box | boîte de rembourrage | box de contenu | initiale | hériter;
- pièce jointe: défilement | fixe | local | initiale | hériter;
- arrière-plan: bg-image position bg-image / taille bg répétition bg origine bg-clip fixation bg initiale | hériter;
Remarques
- Les dégradés CSS3 ne fonctionneront pas sur les versions d'Internet Explorer inférieures à 10.
Couleur de fond
La propriété background-color
définit la couleur d'arrière-plan d'un élément à l'aide d'une valeur de couleur ou de mots-clés, tels que transparent
, inherit
ou initial
.
transparent , spécifie que la couleur d'arrière-plan doit être transparente. Ceci est la valeur par défaut.
inherit , hérite de cette propriété de son élément parent.
initial , définit cette propriété sur sa valeur par défaut.
Cela peut être appliqué à tous les éléments, et aux pseudo-éléments ::first-letter
/ ::first-line
.
Les couleurs en CSS peuvent être spécifiées par différentes méthodes .
Les noms de couleur
CSS
div {
background-color: red; /* red */
}
HTML
<div>This will have a red background</div>
- L'exemple ci-dessus est l'une des nombreuses façons dont CSS doit représenter une seule couleur.
Codes de couleur hexadécimaux
Le code hexadécimal est utilisé pour désigner les composants RVB d'une couleur en notation hexadécimale de base 16. # ff0000, par exemple, est rouge vif, le composant rouge de la couleur est 256 bits (ff) et les parties verte et bleue correspondantes de la couleur sont 0 (00).
Si les deux valeurs de chacun des trois couplages RVB (R, G et B) sont identiques, le code de couleur peut être raccourci en trois caractères (le premier chiffre de chaque association). #ff0000
peut être raccourci en #f00
, et #ffffff
peut être raccourci en #fff
.
La notation hexadécimale est insensible à la casse.
body {
background-color: #de1205; /* red */
}
.main {
background-color: #00f; /* blue */
}
RGB / RGBa
Une autre façon de déclarer une couleur est d'utiliser RGB ou RGBa.
RVB signifie Rouge, Vert et Bleu, et nécessite trois valeurs distinctes entre 0 et 255, mises entre parenthèses, qui correspondent aux valeurs de couleur décimales pour respectivement rouge, vert et bleu.
RGBa vous permet d'ajouter un paramètre alpha supplémentaire entre 0.0 et 1.0 pour définir l'opacité.
header {
background-color: rgb(0, 0, 0); /* black */
}
footer {
background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}
HSL / HSLa
Une autre façon de déclarer une couleur est d'utiliser HSL ou HSLa et est similaire à RGB et RGBa.
HSL est synonyme de teinte, de saturation et de légèreté et est souvent appelé HLS:
- La teinte est un degré sur la roue chromatique (de 0 à 360).
- La saturation est un pourcentage compris entre 0% et 100%.
- La légèreté est également un pourcentage compris entre 0% et 100%.
HSLa vous permet d'ajouter un paramètre alpha supplémentaire entre 0.0 et 1.0 pour définir l'opacité.
li a {
background-color: hsl(120, 100%, 50%); /* green */
}
#p1 {
background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}
Interaction avec image de fond
Les instructions suivantes sont toutes équivalentes:
body {
background: red;
background-image: url(partiallytransparentimage.png);
}
body {
background-color: red;
background-image: url(partiallytransparentimage.png);
}
body {
background-image: url(partiallytransparentimage.png);
background-color: red;
}
body {
background: red url(partiallytransparentimage.png);
}
Ils mèneront tous à la couleur rouge affichée sous l'image, où les parties de l'image sont transparentes, ou l'image ne s'affiche pas (peut-être à la suite d' background-repeat
).
Notez que ce qui suit n'est pas équivalent:
body {
background-image: url(partiallytransparentimage.png);
background: red;
}
Ici, la valeur d' background
- background
remplace votre background-image
.
Pour plus d'informations sur la propriété d' background
- background
, voir Abrégé d'arrière - plan
Image de fond
La propriété background-image
est utilisée pour spécifier une image d'arrière-plan à appliquer à tous les éléments correspondants. Par défaut, cette image est en mosaïque pour couvrir l'élément entier, à l'exclusion de la marge.
.myClass {
background-image: url('/path/to/image.jpg');
}
Pour utiliser plusieurs images en tant qu'image d' background-image
, définissez url()
.myClass {
background-image: url('/path/to/image.jpg'),
url('/path/to/image2.jpg');
}
Les images s'empileront selon leur ordre avec la première image déclarée sur les autres et ainsi de suite.
Valeur | Résultat |
---|---|
url('/path/to/image.jpg') | Spécifiez le (s) chemin (s) de l'image d'arrière-plan ou une ressource d'image spécifiée avec le schéma URI de données (les apostrophes peuvent être omises), séparez les multiples par une virgule |
none | Pas d'image de fond |
initial | Valeur par défaut |
inherit | Hériter la valeur du parent |
Plus CSS pour Image d'arrière-plan
Ces attributs suivants sont très utiles et presque essentiels.
background-size: xpx ypx | x% y%;
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;
Dégradés de fond
Les dégradés sont de nouveaux types d'image, ajoutés dans CSS3. En tant qu'image, les dégradés sont définis avec la propriété background-image
ou le raccourci d' background
- background
.
Il existe deux types de fonctions de gradient, linéaires et radiales. Chaque type a une variante non répétitive et une variante répétitive:
-
linear-gradient()
-
repeating-linear-gradient()
-
radial-gradient()
-
repeating-radial-gradient()
gradient linéaire()
Un linear-gradient
a la syntaxe suivante
background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);
Valeur | Sens |
---|---|
<direction> | Pourrait être un argument comme to top , to bottom , to right ou to left ; ou un angle comme 0deg , 90deg .... L'angle commence de haut en bas et tourne dans le sens des aiguilles d'une montre. Peut être spécifié en deg , grad , rad ou turn . Si omis, le dégradé s'écoule de haut en bas |
<color-stop-list> | Liste de couleurs, éventuellement suivie chacune d'un pourcentage ou d'une longueur pour l'afficher à. Par exemple, yellow 10% , rgba(0,0,0,.5) 40px , #fff 100% ... |
Par exemple, cela crée un dégradé linéaire qui part de la droite et passe du rouge au bleu
.linear-gradient {
background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}
Vous pouvez créer un dégradé en diagonal
en déclarant une position de départ horizontale et verticale.
.diagonal-linear-gradient {
background: linear-gradient(to left top, red, yellow 10%);
}
Il est possible de spécifier n'importe quel nombre d'arrêts de couleur dans un dégradé en les séparant par des virgules. Les exemples suivants créeront un dégradé avec 8 arrêts de couleur
.linear-gradient-rainbow {
background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}
gradient radial ()
.radial-gradient-simple {
background: radial-gradient(red, blue);
}
.radial-gradient {
background: radial-gradient(circle farthest-corner at top left, red, blue);
}
Valeur | Sens |
---|---|
circle | Forme du dégradé. Les valeurs sont circle ou ellipse , la valeur par défaut est ellipse . |
farthest-corner | Mots-clés décrivant la taille de la forme finale. Les valeurs sont les closest-side , les farthest-side , les farthest-side closest-corner , les farthest-corner |
top left | Définit la position du centre du dégradé, de la même manière que la background-position en background-position . |
Gradients répétés
Les fonctions de dégradations répétées prennent les mêmes arguments que les exemples ci-dessus, mais placent le dégradé dans l'arrière-plan de l'élément.
.bullseye {
background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}
Valeur | Sens |
---|---|
-45deg | Unité d'angle . L'angle commence par le haut et tourne dans le sens des aiguilles d'une montre. Peut être spécifié en deg , grad , rad ou turn . |
to left | Direction du dégradé, par défaut to bottom . Syntaxe: to [y-axis(top OR bottom)] [x-axis(left OR right)] c'est- to top right dire to top right |
yellow 10% | Couleur, éventuellement suivie d'un pourcentage ou d'une longueur pour l'afficher à. Répété deux fois ou plus. |
Notez que les codes de couleur HEX, RGB, RGBa, HSL et HSLa peuvent être utilisés à la place des noms de couleur. Les noms de couleurs ont été utilisés à des fins d'illustration. Notez également que la syntaxe à gradient radial est beaucoup plus complexe que le gradient linéaire, et une version simplifiée est présentée ici. Pour une explication complète et les spécifications, consultez la documentation MDN
Sténographie de fond
La propriété background
peut être utilisée pour définir une ou plusieurs propriétés liées à l'arrière-plan:
Valeur | La description | CSS Ver. |
---|---|---|
background-image | Image de fond à utiliser | 1+ |
background-color | Couleur de fond à appliquer | 1+ |
background-position | Position de l'image d'arrière-plan | 1+ |
background-size | Taille de l'image de fond | 3+ |
background-repeat | Comment répéter l'image de fond | 1+ |
background-origin | Comment l'arrière-plan est positionné (ignoré lorsque l' background-attachment est fixed ) | 3+ |
background-clip | Comment l'arrière - plan est peint par rapport à la content-box , border-box , ou padding-box | 3+ |
background-attachment | Comment se comporte l'image d'arrière-plan, qu'elle défile avec son bloc conteneur ou qu'elle ait une position fixe dans la fenêtre d'affichage | 1+ |
initial | Définit la propriété sur valeur par défaut | 3+ |
inherit | Hérite la valeur de propriété du parent | 2+ |
L'ordre des valeurs n'a pas d'importance et chaque valeur est facultative
Syntaxe
La syntaxe de la déclaration abrégée d'arrière-plan est la suivante:
background: [<background-image>] [<background-color>] [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];
Exemples
background: red;
Il suffit de définir une background-color
d' background-color
avec la valeur red
.
background: border-box red;
Définir un background-clip
d' background-clip
sur border-box et une background-color
d' background-color
sur rouge.
background: no-repeat center url("somepng.jpg");
Définit une background-repeat
d' background-repeat
sur non-répétition, background-origin
d' background-origin
au centre et background-image
d' background-image
sur une image.
background: url('pattern.png') green;
Dans cet exemple, la background-color
d' background-color
de l'élément serait définie sur green
avec pattern.png
, s'il est disponible, sur la couleur, en répétant autant de fois que nécessaire pour remplir l'élément. Si pattern.png
inclut une transparence, la couleur green
sera visible derrière.
background: #000000 url("picture.png") top left / 600px auto no-repeat;
Dans cet exemple, nous avons un fond noir avec une image "picture.png" en haut, l'image ne se répète pas dans les deux axes et est positionnée dans le coin supérieur gauche. Le /
après la position est de pouvoir inclure la taille de l'image de fond qui, dans ce cas, est définie comme largeur 600px
et auto pour la hauteur. Cet exemple pourrait bien fonctionner avec une image de fonction qui peut devenir une couleur unie.
REMARQUE: L' utilisation de la propriété d'arrière-plan abrégée réinitialise toutes les valeurs de propriété d'arrière-plan définies précédemment, même si aucune valeur n'est donnée. Si vous souhaitez uniquement modifier une valeur de propriété d'arrière-plan définie précédemment, utilisez plutôt une propriété longhand.
Position de fond
La propriété background-position
est utilisée pour spécifier la position de départ d'une image d'arrière-plan ou d'un dégradé
.myClass {
background-image: url('path/to/image.jpg');
background-position: 50% 50%;
}
La position est définie à l'aide des coordonnées X et Y et définie à l'aide de l'une des unités utilisées dans CSS.
Unité | La description |
---|---|
valeur % valeur % | Un pourcentage pour le décalage horizontal est relatif à (largeur de la zone de positionnement d'arrière-plan - largeur de l'image d'arrière-plan) . Un pourcentage pour le décalage vertical est relatif à (hauteur de la zone de positionnement d'arrière-plan - hauteur de l'image d'arrière-plan) La taille de l'image est la taille donnée par la taille de l' background-size . |
valeur px valeur px | Décale l'image de fond d'une longueur donnée en pixels par rapport à la partie supérieure gauche de la zone de positionnement de l'arrière-plan |
Les unités en CSS peuvent être spécifiées par différentes méthodes (voir ici ).
Propriétés de la position d'arrière-plan à long terme
En plus de la propriété abrégée ci-dessus, on peut également utiliser les propriétés d' background-position-x
long background-position-x
et background-position-y
. Celles-ci vous permettent de contrôler les positions x ou y séparément.
REMARQUE: Ceci est pris en charge dans tous les navigateurs sauf Firefox (versions 31 à 48) 2 . Firefox 49, qui sera publié en septembre 2016, prendra en charge ces propriétés. Jusque-là, il existe un hack Firefox dans cette réponse Stack Overflow.
Attachement de fond
La propriété background-attachment définit si une image d'arrière-plan est fixe ou défile avec le reste de la page.
body {
background-image: url('img.jpg');
background-attachment: fixed;
}
Valeur | La description |
---|---|
faire défiler | L'arrière-plan défile avec l'élément. Ceci est la valeur par défaut. |
fixé | L'arrière-plan est corrigé par rapport à la fenêtre d'affichage. |
local | L'arrière-plan défile avec le contenu de l'élément. |
initiale | Définit cette propriété sur sa valeur par défaut. |
hériter | Hérite cette propriété de son élément parent. |
Exemples
pièce jointe: défilement
Le comportement par défaut, lorsque le corps défile, l’arrière-plan défile avec:
body {
background-image: url('image.jpg');
background-attachment: scroll;
}
background-attachment: corrigé
L'image de fond sera fixe et ne bougera pas lorsque le corps défilera:
body {
background-image: url('image.jpg');
background-attachment: fixed;
}
background-attachment: local
L'image de fond du div défilera lorsque le contenu de la div défilera.
div {
background-image: url('image.jpg');
background-attachment: local;
}
Répétition du fond
La propriété de répétition d'arrière-plan définit si / comment une image d'arrière-plan sera répétée.
Par défaut, une image d'arrière-plan est répétée verticalement et horizontalement.
div {
background-image: url("img.jpg");
background-repeat: repeat-y;
}
Voici à quoi ressemble une background-repeat: repeat-y
:
Couleur de fond avec opacité
Si vous définissez l' opacity
sur un élément, cela affectera tous ses éléments enfants. Pour définir une opacité juste sur l'arrière-plan d'un élément, vous devrez utiliser les couleurs RGBA. L'exemple suivant aura un arrière-plan noir avec une opacité de 0,6.
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
Image d'arrière-plan multiple
En CSS3, nous pouvons empiler plusieurs arrière-plans dans le même élément.
#mydiv {
background-image: url(img_1.png), /* top image */
url(img_2.png), /* middle image */
url(img_3.png); /* bottom image */
background-position: right bottom,
left top,
right top;
background-repeat: no-repeat,
repeat,
no-repeat;
}
Les images seront empilées les unes sur les autres avec le premier arrière-plan en haut et le dernier arrière-plan en arrière. img_1
sera en haut, img_2
et img_3
en bas.
Nous pouvons également utiliser la propriété de raccourci d'arrière-plan pour ceci:
#mydiv {
background: url(img_1.png) right bottom no-repeat,
url(img_2.png) left top repeat,
url(img_3.png) right top no-repeat;
}
Nous pouvons également empiler des images et des dégradés:
#mydiv {
background: url(image.png) right bottom no-repeat,
linear-gradient(to bottom, #fff 0%,#000 100%);
}
La propriété background-origin
La propriété background-origin spécifie l'emplacement de l'image d'arrière-plan.
Remarque: Si la propriété background-attachment
est définie sur fixed
, cette propriété n'a aucun effet.
Valeur par défaut: padding-box
Valeurs possibles:
-
padding-box
- La position est relative à la boîte de rembourrage -
border-box
- La position est relative à la case de bordure -
content-box
- La position est relative à la zone de contenu -
initial
-
inherit
CSS
.example {
width: 300px;
border: 20px solid black;
padding: 50px;
background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
background-repeat: no-repeat;
}
.example1 {}
.example2 { background-origin: border-box; }
.example3 { background-origin: content-box; }
HTML
<p>No background-origin (padding-box is default):</p>
<div class="example example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: border-box:</p>
<div class="example example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: content-box:</p>
<div class="example example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
Plus:
https://www.w3.org/TR/css3-background/#the-background-origin
https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
Clip de fond
Définition et utilisation: La propriété background-clip
spécifie la zone de peinture de l'arrière-plan.
Valeur par défaut: border-box
Valeurs
-
border-box
est la valeur par défaut. Cela permet à l'arrière-plan de s'étendre jusqu'au bord extérieur de la bordure de l'élément. -
padding-box
coupe l'arrière-plan au bord extérieur du rembourrage de l'élément et ne le laisse pas s'étendre jusqu'à la bordure; -
content-box
coupe l'arrière-plan au bord de la zone de contenu. -
inherit
applique le paramètre du parent à l'élément sélectionné.
CSS
.example {
width: 300px;
border: 20px solid black;
padding: 50px;
background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
background-repeat: no-repeat;
}
.example1 {}
.example2 { background-origin: border-box; }
.example3 { background-origin: content-box; }
HTML
<p>No background-origin (padding-box is default):</p>
<div class="example example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: border-box:</p>
<div class="example example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: content-box:</p>
<div class="example example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
Taille de fond
Aperçu général
La propriété background-size
permet de contrôler la mise à l'échelle de l' background-image
. Il prend jusqu'à deux valeurs, qui déterminent l'échelle / la taille de l'image résultante dans le sens vertical et horizontal. Si la propriété est manquante, son auto
réputé en width
et en height
.
auto
conservera le format de l'image, s'il peut être déterminé. La hauteur est facultative et peut être considérée comme auto
. Par conséquent, sur une image de 256 px × 256 px, tous les paramètres de background-size
suivants donneraient une image avec une hauteur et une largeur de 50 px:
background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;
Donc, si nous avons commencé avec l'image suivante (qui a la taille mentionnée de 256 px × 256 px),
nous allons nous retrouver avec 50 px x 50 px sur l'écran de l'utilisateur, à l'arrière-plan de notre élément:
On peut également utiliser des valeurs de pourcentage pour redimensionner l'image en fonction de l'élément. L'exemple suivant donnerait une image dessinée de 200 px × 133 px:
#withbackground {
background-image: url(to/some/background.png);
background-size: 100% 66%;
width: 200px;
height: 200px;
padding: 0;
margin: 0;
}
Le comportement dépend de l' background-origin
l' background-origin
.
Garder le ratio d'aspect
Le dernier exemple de la section previos a perdu son format d'origine. Le cercle entra dans une ellipse, le carré dans un rectangle, le triangle dans un autre triangle.
L'approche de la longueur ou du pourcentage n'est pas assez flexible pour conserver le rapport d'aspect en tout temps. auto
n'aide pas, car vous pourriez ne pas savoir quelle dimension de votre élément sera la plus grande. Cependant, pour couvrir complètement certaines zones avec une image (et corriger le format d'image) ou pour contenir une image avec un rapport d'aspect correct complètement dans une zone d'arrière-plan, les valeurs, le contain
et la cover
fournissent des fonctionnalités supplémentaires.
Eggsplanation pour contain
et cover
Désolé pour le mauvais jeu de mots, mais nous allons utiliser une photo du jour de Biswarup Ganguly pour la démonstration. Disons qu'il s'agit de votre écran et que la zone grise est en dehors de votre écran visible. Pour démonstration, nous allons prendre un ratio de 16 × 9.
Nous voulons utiliser l'image ci-dessus de la journée comme arrière-plan. Cependant, nous avons recadré l'image en 4x3 pour une raison quelconque. Nous pourrions définir une propriété de background-size
à une longueur fixe, mais nous nous concentrerons sur le contain
et la cover
. Notez que je suppose également que nous n'avons pas modifié la largeur et / ou la hauteur du body
.
contain
contain
Mettez à l'échelle l'image, tout en conservant son rapport d'aspect intrinsèque (le cas échéant), à la plus grande taille, de sorte que sa largeur et sa hauteur puissent tenir dans la zone de positionnement de l'arrière-plan.
Cela garantit que l'image d'arrière-plan est toujours complètement contenue dans la zone de positionnement de l'arrière-plan. Cependant, il pourrait y avoir un espace vide rempli de votre background-color
dans ce cas:
cover
cover
Mettez à l'échelle l'image, tout en conservant son rapport d'aspect intrinsèque (le cas échéant), à la plus petite taille, de sorte que sa largeur et sa hauteur puissent couvrir complètement la zone de positionnement de l'arrière-plan.
Cela garantit que l'image de fond couvre tout. Il n'y aura pas de background-color
visible, mais en fonction du ratio de l'écran, une grande partie de votre image pourrait être coupée:
Démonstration avec le code actuel
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
Propriété background-blend-mode
.my-div {
width: 300px;
height: 200px;
background-size: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
background-blend-mode:saturation;
}
<div class="my-div">Lorem ipsum</div>
Voir le résultat ici: https://jsfiddle.net/MadalinaTn/y69d28Lb/
Syntaxe CSS: background-blend-mode: normal | multiplier | écran | superposition | assombrir | éclaircir | couleur-dodge | saturation | couleur | luminosité;