Share
Nous avons créé un guide complet pour vous aider à apprendre le CSS, que vous soyez débutant avec les bases ou que vous souhaitiez explorer un CSS plus avancé..
Dans ce didacticiel, nous allons examiner l'une des propriétés CSS les plus anciennes et les plus familières: Contexte. Contexte est l'une des propriétés CSS dont les fonctionnalités sont souvent négligées. En fait, CSS3 a été mis à niveau et reçoit de nouvelles fonctionnalités, qui vont au-delà de l’ajout d’une image de fond ou d’une couleur. Regardons dans certains d'entre eux!
Le positionnement d'un graphique d'arrière-plan est simple et vous connaissez probablement déjà quelque chose. Si nous voulons positionner l’arrière-plan en bas à droite de l’élément, nous appliquons en bas à droite à position de fond. Par exemple:
# espace de travail largeur: 100%; largeur maximale: 668px; hauteur: 400px; couleur de fond: # 525d62; background-image: url (images / macbook.png); répétition de fond: non répétée; position de fond: en bas à droite;
Ou, avec le raccourci, Contexte, après la définition de l'URL:
# espace de travail largeur: 100%; largeur maximale: 668px; hauteur: 400px; background: # 525d62 url (images / macbook.png) non répété, en bas à droite;
Depuis l'avènement de CSS3, nous avons pu spécifier la position décalage; les distances précises aux positions définies. Prenons notre exemple de en bas à droite, nous incluons bas 20px à droite 30px pour positionner notre arrière-plan à 20px du bas et 30px à partir de la gauche.
# espace de travail largeur: 100%; largeur maximale: 668px; hauteur: 400px; couleur de fond: # 525d62; background-image: url (images / macbook.png); répétition de fond: non répétée; position de fond: droite 30px en bas 20px;
Les positions (bas, Haut, droite, la gauche) peut être défini dans n’importe quel ordre, mais la longueur du décalage doit être définie après chaque position de fond.
Le mérite revient à Metin Kazan pour les illustrations.
le Contexte Cette propriété nous permet également d’ajouter plusieurs images d’arrière-plan. Par conséquent, étendons notre exemple précédent avec plus de choses et de gadgets.
Nous ajoutons ces images à un seul Contexte ou image de fond déclaration en séparant chacun avec une virgule. Nous utilisons le position de fond propriété, qui accepte également plusieurs valeurs, pour contrôler chacune de ces images d'arrière-plan.
#workspace height: 400px; couleur de fond: # 525d62; background-image: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); répétition de fond: non répétée; position de fond: 50% 50%, / * macbook.png * / 75% 295px, / * mouse.png * / 75% 230px, / * hdd.png * / 96% 240px, / * phone.png * / 20 % 250px, / * ipad.png * / 22% 190px, / * coffee.png * / 7% 280px; / * camera.png * /
Nous pouvons utiliser des unités fixes (telles que des pixels), des unités flexibles (telles que des pourcentages) ou une combinaison des deux..
Chaque paire de valeurs représente les coordonnées du en haut à gauche de l'élément conteneur, à la en haut à gauche de l'image. Par exemple, le coin supérieur gauche de l'image de la caméra est à 280 pixels du haut du conteneur, puis 7% de la disponible largeur à gauche.
Remarque: Le disponible largeur est la largeur totale de l'élément conteneur moins la largeur de l'image d'arrière-plan. Par conséquent, une image d'arrière-plan positionnée à 50% le long de l'axe des x apparaît exactement au centre!
De plus, depuis le position de fond est une propriété animable, nous pouvons créer un arrière-plan plus vivant et attrayant:
#workspace width: 600px; hauteur: 400px; couleur de fond: # 525d62; répétition de fond: non répétée; background-image: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); position de base: 50% 50%, 430px 295px, 425px 230px, 480px 240px, 105px 250px, 120px 190px, 40px 280px; animation: 3s facilité 0s inView avant; @keyframes inView 0% position-fond-y: 600%, 451 pixels, -448 pixels, 240 pixels, 496 pixels, -44 pixels, 280 pixels; background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 20% background-position-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px; background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 30% background-position-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px; background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 40% background-position-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px; background-position-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%; 50% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%; 60% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%; 100% background-position-y: 50%, 295 pixels, 230 pixels, 240 pixels, 250 pixels, 190 pixels, 280 pixels;
Ici, nous avons configuré plusieurs images clés sur une timeline. À chaque image clé, nous avons modifié le background-position-x et background-position-y de chaque image de fond. L’animation est certes rudimentaire, merci de bien vouloir bifurquer le CodePen et l’améliorer!
Remarque: Cliquez sur Rediffusion en bas à droite du stylo pour voir l'animation
Les fonds que nous avons utilisés sont ordonnés de manière séquentielle; la toute première liste apparaît en haut de la pile, tandis que la dernière liste apparaît en bas de la pile d'arrière-plan.
#workspace width: 600px; hauteur: 400px; couleur de fond: # 525d62; background-image: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); / * empilés en bas * / background-repeat: no-repeat;
Toutes les sous-propriétés de fond (Répétition du fond, taille de fond, position de fond etc.) peuvent être définis plusieurs fois, sauf Couleur de fond. Si nous appliquons plusieurs arrière-plans en utilisant le raccourci Contexte propriété, définissez la couleur d’arrière-plan comme la dernière valeur à prendre en compte. Par exemple:
#workspace height: 400px; background: url (images / macbook.png) 50% 50% non répétée, url (images / mouse.png) 430px 295px non répétée, url (images / camera.png) 425px 230px non répétée # 525d62;
Alternativement, ajouter un séparé Couleur de fond, à la suite de la propriété de short hand:
#workspace width: 600px; hauteur: 400px; background: url (images / macbook.png) 50% 50% non répétée, url (images / mouse.png) 430px 295px non répétée, url (images / camera.png) 425px 230px non répétée; couleur de fond: # 525d62;
Ces deux codes font la même chose, mais je trouve le dernier plus intuitif et lisible.
le mode de fusion de fond fait la même chose que dans les applications graphiques telles que Photoshop ou Gimp; il mélange les images d'arrière-plan les unes aux autres, ainsi qu'à tout ce qui se trouve en dessous.
le mode de fusion de fond prend des valeurs familières telles que recouvrir et multiplier parmi d'autres que Jonathan Cutrell explique très bien dans son tutoriel sur le sujet. Je vous recommande fortement de le lire afin que nous puissions passer à quelques exemples pratiques.
Il existe plusieurs façons d'utiliser le mode de fusion CSS pour créer des motifs saisissants, comme le mélange d'un dégradé avec une image, ce que Ian Yates a souligné dans son résumé:
Pour créer cet effet, nous ajoutons une image d’arrière-plan et un dégradé, puis appliquons le recouvrir mode de fusion.
Accentsconagua
#blend background-repeat: no-repeat; image de fond: url ('img / people-15.jpg'), gradient linéaire (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); background-blend-mode: superposition; La superposition a une incidence sur les deux arrière-plans énumérés ici. Vous devrez donc peut-être faire preuve de prudence si vous ne voulez pas que tout se mélange. Si vous souhaitez éviter tout mélange avec la couleur d'arrière-plan, définissez la deuxième valeur sur Ordinaire qui s'appliquera à notre deuxième image de fond.
#blend background-repeat: no-repeat; background-image: url ('… /img/people-15.jpg'), dégradé linéaire (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); couleur de fond: jaune; background-blend-mode: superposition, normal; le clip de fond property est un utilitaire qui contrôle l'étendue de la couleur d'arrière-plan et de l'image dans le modèle de zone de contenu CSS. Semblable à la taille de la boîte la propriété, la clip de fond property prend trois valeurs valides, à savoir:
boîte à bordure est la valeur par défaut qui couvre l’image ou la couleur d’arrière-plan jusqu’au bord extérieur de l’élément.rembourrage s'étendra sur l'arrière-plan jusqu'au bord extérieur du rembourrage, ou en d'autres termes; le bord intérieur de la frontière.contenu-box préservera l'arrière-plan du contenu de l'élément, comme indiqué ci-dessous:Un exemple pratique où j'ai trouvé clip de fond être pratique, c’est quand je dois créer un bouton avec une icône, en utilisant un seul élément. Dans la démo suivante, notre image s’étend du bord gauche à droite de l’élément, même si nous ajoutons un remplissage de chaque côté, puisqu’elle s’applique boîte à bordure.
Si nous voulons entourer l'icône d'un peu d'espace, nous devrions traditionnellement l'envelopper avec un autre élément et appliquer un remplissage sur cet élément supplémentaire. En utilisant le clip de fond propriété, nous pouvons le faire avec élégance en le réglant sur contenu-box, et remplacez le rembourrage par des bordures de la même couleur que la couleur de fond.
le Contexte la propriété est celle que nous utilisons fréquemment dans nos projets. J'espère que cet article vous a rappelé ses utilisations vastes et variées, et j'ai hâte d'entendre d'autres idées dans les commentaires..
Remarque finale: prise en charge de ces propriétés par le navigateur (à l’exception de mode de fusion de fond) sont geniaux. Selon CanIUse, plusieurs arrière-plans sont pris en charge à partir d’Internet Explorer 9, avec quelques problèmes mineurs. Les options d’image d’arrière-plan, telles que la clip de fond propriété, est presque aussi bon.
Les modes de fusion, au moment de la rédaction de cet article, fonctionnent mieux sous Chrome et Opera, sont partiellement applicables dans Safari en raison de quelques bogues, mais ne semblent malheureusement pas avoir montré de progrès avec Microsoft Edge..
