Opacité de l'image d'arrière-plan CSS sans affecter le texte
Exemple 1
Pour modifier l'opacité de l'image d'arrière-plan sans affecter le texte, nous devons écrire du code HTML et modifier l'opacité dans le code CSS. Nous utilisons le code Visual Studio pour faire ces exemples. Nous ouvrons donc le nouveau fichier dans ce logiciel et sélectionnons la langue «HTML», et un fichier HTML est créé. Ensuite, nous commençons à coder dans ce fichier. Après avoir terminé notre code, nous l'enregistrons et le ««.L'extension de fichier html ”génère automatiquement ce nom de fichier.
Nous créons une classe «div» «Demo-Wrap» à l'aide d'une balise d'image. La classe d'image que nous utilisons est «IMG-BG». Maintenant, nous devons définir l'image en arrière-plan, nous utilisons donc «Background-IMG SRC» et mettons le nom de l'image que nous voulons afficher comme image d'arrière-plan. Ici, nous définissons le «paysage.Image JPG comme l'image d'arrière-plan. Nous avons également un autre «div» à l'intérieur de la première div, et le nom de cette div est «texte». Et, dans le deuxième div, nous avons un titre «H1» et tapez une tête dans ce «div». Ensuite, fermez les deux balises «div».
Code CSS
Dans le code CSS donné, nous modifions l'opacité de l'image d'arrière-plan, mais le titre de texte que nous écrivons sur cette image reste le même. L'opacité de l'image d'arrière-plan ne change pas l'opacité du texte.
Nous utilisons «IMG-BG», qui est le nom de la classe d'image, et définissons l'opacité de l'image comme «0.4 ”. Nous définissons l'image d'arrière-plan «position» sur «Absolute». La «gauche» et le «haut» sont tous deux définis sur «0». La «largeur» que nous définissons ici est «100%» pour l'image d'arrière-plan, et «hauteur» est «automatique». Ensuite, nous concevons notre texte en l'alignons dans le «centre» et avons mis sa «famille de police» à «Algérien». Nous utilisons «noir» comme couleur de la police.
Sortir
Vous pouvez voir que l'image en arrière-plan n'est pas dans sa couleur d'origine car nous utilisons «0.4 ”Opacité sur cette image d'arrière-plan. Cependant, il n'y a aucun effet sur le texte écrit sur l'image. De cette manière, nous pouvons modifier l'opacité de l'image sans affecter le texte.
Exemple n ° 2
En modifiant le code HTML précédent, nous avons créé un autre exemple. Mais cette fois, nous avons ajouté l'image en utilisant les propriétés CSS.
Ce fichier définit deux titres dans la classe «div». Nous avons «H1» et «H2» dans la classe div nommée «Hero» dans ce code. Nous ajouterons l'image d'arrière-plan dans le code CSS ci-dessous.
Code CSS
La position du «héros» de la classe Div est «relative», sa hauteur est «90VH», et sa largeur est «90%». L'affichage de ce «héros» de la classe div est «flex», élément du «centre» et «justifier-contenu» au «centre». Le «:: avant» est le «pseudo-selector» utilisé pour placer l'image d'arrière-plan avant l'élément sélectionné. Nous mettons «Contenu», définissons «l'image d'arrière-plan» à l'aide de «l'URL» et mettons le nom de l'image dans cette URL. La «taille de fond» définit l'image de l'arrière-plan pour «couvrir», et sa «position» est «absolue». Ensuite, le «haut», le «bas», «gauche» et «droite» sont tous «0px». Ici, nous changeons «l'opacité» en «0.4 ”. Maintenant, nous appliquons le style aux titres. Le titre «position» que nous définissons est «relatif». La couleur de cap est «rouge». La taille de cette rubrique est «25px», et la «hauteur de ligne» est «0.9 ”. Nous alignons cette tête vers le «centre». La couleur du deuxième titre est «noir».
Sortir
Ici, l'image d'arrière-plan n'apparaît pas dans sa couleur d'origine car nous avons défini l'opacité de l'image dans le code CSS. Mais le texte sur l'image apparaît dans la couleur d'origine.
Exemple n ° 3
Nous créons un autre fichier HTML. Dans ce code, nous créons trois paragraphes à l'intérieur de la classe Div, et la classe DIV que nous avons créée est nommée «ImageOPC».
Code CSS
Nous allons insérer l'image d'arrière-plan dans le code CSS. Ainsi, nous utilisons le pseudo-sélectionneur «avant», que nous avons désaffecté dans l'exemple précédent. Ici, le code est le même que dans le deuxième exemple, mais nous modifions l'image d'arrière-plan et utilisons la propriété «Opacité» sur une image différente. Ici, «à gauche», «droite», «fond» et «haut» sont tous définis sur «0». Et «0.4 ”de l'opacité est utilisée pour cette image. Nous définissons le paragraphe en position «relative». Et définir sa hauteur égale à «0.9px ”. Nous modifions également la «taille de police» du paragraphe et le définissons sur «25px». La police «algérienne» est utilisée pour le paragraphe. Et nous avons réglé son meilleur «200px».
Sortir
Vous pouvez voir que l'image d'arrière-plan montre une certaine transparence. Ici, nous utilisons une opacité de 40% sur cette image d'arrière-plan, mais vous remarquerez peut-être qu'elle n'affecte pas le texte écrit sur l'image d'arrière-plan.
Exemple n ° 4
Nous apportons des modifications mineures au code HTML précédent. Dans cet exemple, nous utilisons quatre paragraphes à l'intérieur des noms «div» et «givegivingageopc» pour cette classe div.
Code CSS
Ce code CSS est le même que le code précédent. Cependant, nous modifions «l'URL» de l'image d'arrière-plan. Nous utilisons le «Centre d'arrière-plan.Image JPG ici. N'oubliez pas que vous utilisez l'extension d'image correcte avec le nom de l'image. Vous devez mettre le chemin correct de l'image dans cette «URL». Nous utilisons le «0.Valeur de 5 ”pour l'opacité de l'image d'arrière-plan dans ce cas. La «taille de police» que nous utilisons est «30px» dans cet exemple pour le paragraphe. Nous définissons le paragraphe Font-Family à «Times New Roman», et en plus de cela se trouve «200px». Le paragraphe apparaît dans "Maroon" et est "plus audacieux" dans "Font-Weight".
Sortir
Cette image d'arrière-plan montre une opacité de 50% lorsque nous définissons sa valeur sur «0.5 ”, mais le texte reste le même. Cette valeur d'opacité ne s'applique pas au texte.
Conclusion
Nous avons présenté ce guide dans lequel nous modifions l'opacité de l'image de fond sans affecter le texte. Ainsi, vous pouvez déterminer comment modifier l'opacité de l'image d'arrière-plan dans CSS sans affecter le texte. Nous avons expliqué et montré différents exemples dans lesquels nous utilisons la propriété «Opacité» pour modifier l'opacité de l'image d'arrière-plan, mais le texte reste le même. Après avoir appris ce guide, vous pouvez insérer les images d'arrière-plan dans vos projets et définir l'opacité de l'image d'arrière-plan sans affecter le texte à l'aide de la propriété CSS.