Image d'arrière-plan assombrie CSS

L'image assombrie signifie que nous faisons apparaître notre image en mode sombre. Le CSS fournit différentes propriétés pour rendre l'image ou l'image d'arrière-plan plus sombre. Nous pouvons utiliser ces propriétés et définir leurs valeurs en fonction de notre choix et faire de notre image une image plus sombre. Le CSS nous offre cette opportunité de rendre les images plus sombres en utilisant trois propriétés différentes. Dans ce tutoriel, nous rendrons notre image de fond plus sombre en utilisant les propriétés CSS et vous montrerons l'image plus sombre et originale.

Propriétés pour l'image de fond assombrie dans CSS:

Nous utiliserons les trois propriétés suivantes que le CSS offre pour assombrir l'image d'arrière-plan. Ces propriétés sont:

• Utilisation de la propriété filtrante.
• Utilisation de la propriété d'image d'arrière-plan et définissez sa valeur dans le gradient linéaire.
• Utilisation de la propriété en mode mélange d'arrière-plan.

Maintenant, nous allons utiliser toutes ces propriétés dans nos codes ci-dessous et vous apprendrez de ces exemples comment utiliser ces propriétés et comment définir la valeur de ces propriétés car nous expliquerons également tous les codes.

Exemple 1:

Nous utilisons le code Visual Studio pour montrer les exemples fournis. Nous allons donc ouvrir le nouveau fichier et sélectionner la langue «HTML», ce qui entraînera la production d'un fichier HTML. Ensuite, dans le fichier nouvellement généré, nous commençons à écrire le code. Le ".L'extension de fichier html »est automatiquement ajoutée au nom du fichier lorsque nous enregistrons le code terminé. Maintenant, nous obtenons des étiquettes de base en mettant "!"Marques et appuyer sur" Entrer ". Lorsque les balises HTML de base sont apparues dans ce fichier créé, nous commencerons par ajouter un titre.

Ensuite, nous avons également mis un paragraphe sous cette rubrique et insérer l'image après ce paragraphe. Si l'image est insérée, nous avons un autre paragraphe et aussi une classe Div avec le nom «Image sombre». Ici, le code HTML est terminé. Maintenant, enregistrez-le et passons au fichier CSS où nous ajouterons la propriété «filtre» pour assombrir l'image d'arrière-plan.

Pour «H1», nous avons fixé la valeur «Font-Family» à «Algérien» et appliquons également la «couleur» à cette rubrique en tant que «vert». La «taille de police» du texte du paragraphe est «20px» et sa «couleur» est «rouge», «audacieuse» dans son «poids de police». Ensuite, nous allons utiliser la propriété «filtre» pour la classe DIV «Image sombre». Cette propriété aide à rendre l'image plus sombre. Nous avons utilisé cette propriété ici pour que l'image semble plus sombre dans la sortie. Nous définissons sa valeur en utilisant la valeur «luminosité» et sélectionnons la luminosité «60%» pour cette image.

Dans «l'image en arrière-plan», nous avons mis le même chemin de l'image que nous avons donné dans le fichier HTML. Ainsi, nous appliquons cette propriété sombre à l'image que nous avons insérée ci-dessus et nous verrons cette image originale ainsi que l'image sombre sur l'écran de sortie. Nous avons également réglé la «largeur» et la «hauteur» de la div en tant que «200px» et «620px» respectivement. Cette propriété «hauteur» définira la hauteur de la div et la propriété «largeur» définira la largeur du div.

Nous faisons de cette image une image plus sombre à l'aide de la propriété «filtre» CSS et définissant la «luminosité» comme valeur de cette propriété. Nous avons appliqué une luminosité «60%» à cette image pour la rendre plus sombre que l'image d'origine.

Exemple n ° 2:

Nous avons une rubrique ici et ensuite ajouter l'image. Après cette image, nous plaçons à nouveau un titre, puis nous avons un conteneur div. Nous utiliserons la deuxième propriété pour faire de cette image une plus sombre.

Nous appliquons la «couleur» à cette rubrique en tant que «marron» et fixons la valeur «Font-Family» pour «H1» à «Algérien». La «hauteur» de l'image est définie sur «240px» et sa «largeur» est «630px». Ensuite, nous mentionnons le conteneur DIV «Image sombre» et mettons la propriété «Image d'arrière-plan» dans laquelle nous utilisons le «gradient linéaire» et fixons sa valeur sous forme «RGBA». Ici, nous utilisons deux valeurs «RGBA» et les définissons sur «RGBA (0, 0, 0, 0.5) «Où« 0.5 ”est la valeur alpha. Nous insérons également l'image dans «URL ()». Nous insérons le chemin de l'image dans cette «url ()». La «hauteur» de cette div est «240px» et nous définissons également sa «largeur» à «630px».

Dans la sortie, les versions originales et sombres de l'image peuvent être vues. L'image d'origine et l'image sombre peuvent être clairement distinguées les unes des autres dans la capture d'écran ci-dessous. L'image sombre est rendue parce que nous avons utilisé la propriété «Image d'arrière-plan» et réglé sa valeur dans le type «linéaire-gradient».

Exemple # 3:

Nous avons utilisé le code HTML ci-dessus et nous insérons une autre image dans ce code. Nous utiliserons le «mode de mélange d'arrière-plan» pour créer l'effet d'image assombri sur l'image.

Nous avons réglé la valeur «Font-Family» pour «H1» sur «Algérien» et appliquait «Couleur» à cette tête à «Maroon». La «largeur» de l'image est «630px» et sa «hauteur» est «250px». Nous utilisons le nom de la classe Div comme «l'image assombrie» et allons y appliquer des propriétés. Nous utilisons la propriété «arrière-plan» et placez la valeur «RGBA» ici. La valeur «RGBA» que nous utilisons est «(0, 0, 0, 0.7) »Et ensuite nous avons la propriété« URL »que nous utilisons pour donner le chemin de l'image. Nous donnons le chemin de l'image comme «MyNewimage.Png ”.

Après cela, nous avons la propriété «repeat background» et utilisons le mot-clé «sans réparation» comme valeur de cette propriété. Maintenant, nous définissons également la «taille de fond» et placons «couverture» afin que l'image couvre tous les arrière-plans. La propriété «en mode mélange d'arrière-plan» est pour appliquer l'effet d'assombrissement à l'image. Nous le définissons comme le mot-clé «assombrir». Ainsi, lorsque cette image sera rendu sur l'écran de sortie, elle apparaîtra comme une image sombre à cause de cette propriété. La «hauteur» de la div nommée «Image Darquée» est ajustée à «330px» et nous avons également réglé sa «largeur» qui est «650px». Maintenant, regardez la sortie de la façon dont ces images apparaîtront.

Les formes d'origine et les plus sombres de l'image sont visibles dans le résultat. Ici, dans l'instantané ci-dessous, il est possible de faire facilement la différence entre l'image d'origine et l'image sombre. Nous avons utilisé l'attribut «Mode de mélange d'arrière-plan» et placé le mot-clé «plus sombre» comme valeur de cet attribut pour rendre l'image sombre.

Conclusion

Nous avons soigneusement couvert ce concept et examiné de nombreux cas pour assombrir l'image d'arrière-plan dans CSS. Comme cela a été mentionné précédemment, nous avons utilisé trois propriétés différentes pour assombrir l'image d'arrière-plan. Nous avons utilisé les trois propriétés de nos codes. Nous avons également couvert comment utiliser ces propriétés et comment définir leur valeur. Nous avons discuté que nous avons la propriété «Filtre», la propriété «Image de fond», ainsi que la propriété «en mode de mélange de fond» pour rendre l'image d'arrière-plan plus sombre. Nous avons également fourni les résultats de tous ces codes dans lesquels nous avons rendu l'obscurité ainsi que l'image d'origine sur l'écran de sortie. Pour votre avantage, nous avons créé un tutoriel complet dans lequel le code est à la fois fourni et expliqué en profondeur, ainsi que les résultats.