Résumé des effets d'arrière-plan transparent et d'opacité du texte à l'aide de CSS

L'utilisation de styles transparents et opaques est devenue populaire très tôt dans le processus de développement du projet. C'est désormais un effet que tout le monde connaît très bien. L'effet de transparence n'est pas seulement utilisé dans les images, mais également à divers endroits. L'utilisation de CSS permet également d'obtenir facilement des paramètres de compatibilité pour différents navigateurs. Parfois, il est souvent utilisé pour mettre du texte d'introduction sur l'image d'arrière-plan. Il est nécessaire que l'image d'arrière-plan soit transparente et que le texte soit opaque. Dans les chapitres suivants, nous parlerons de l'utilisation de CSS pour obtenir l'effet d'images d'arrière-plan transparentes et de texte opaque.

Transparence d'arrière-plan et effets d'opacité du texte

1 Utilisez CSS pour obtenir un arrière-plan transparent. images Il existe deux façons de rendre le texte opaque

Méthode 1 (effet verre dépoli) : image d'arrière-plan + pseudo classe + flite:blur(3px)

Méthode 2 (effet translucide) : background Image + positionnement + background:rgba(255,255,255,0.3)

Deux façons d'obtenir une image d'arrière-plan transparente et un texte opaque avec CSS

2 CSS pour obtenir un fond transparent et opaque. text ( Compatible avec tous les navigateurs)

Dans les navigateurs plus récents tels que FF/Chrome, vous pouvez utiliser le rgba de l'attribut css background-color pour obtenir facilement un arrière-plan transparent tandis que le texte reste opaque. Les navigateurs IE6/7/8 ne prennent pas en charge rgba et ne peuvent être obtenus qu'en utilisant le filtre exclusif d'IE : Alpha. Cependant, cette façon d'écrire rendra le texte transparent, il ne pourra donc être utilisé que dans les nœuds enfants du transparent. conteneur (sauf les nœuds de texte). Définir la position : relative pour ne pas hériter du filtre de transparence de son élément parent.

3. Comment obtenir un arrière-plan transparent et un texte opaque en CSS

Il existe généralement 3 façons d'obtenir un CSS transparent. Voici comment écrire l'opacité à 80. %

opacité de css3 : à 1, comme rgba(255,255,255,0.8)

Filtre exclusif IE filter:Alpha(opacity=x), la valeur de x est de 0 à 100, telle as filter:Alpha(opacity=80)

4.

Solution pour définir la transparence de l'arrière-plan et l'opacité du texte

Définir la transparence des éléments :

-moz-opacity:0.8; /*Définir les éléments dans Firefox Transparency

filter: alpha(opacity=80); /*ie utiliser un filtre pour définir la transparence

Mais quand nous définissons l'arrière-plan transparence d'une étiquette, nous ne voulons souvent pas que l'étiquette soit transparente. Le texte et les images sont également devenus translucides.

5.

Code complet pour implémenter l'opacité CSS3

Description de la valeur :

1 | unit La valeur de longueur composée de caractères. Il ne peut pas s'agir d'une valeur négative et la valeur par défaut est 1. Lorsque la valeur d'opacité est 1, l'élément est complètement opaque ; à l'inverse, lorsque la valeur est 0, l'élément est complètement transparent et invisible.

2. Hériter signifie héritage, c'est-à-dire hériter de l'opacité de l'élément parent.

3. Pour le navigateur IE, vous pouvez utiliser son filtre d'attribut privé pour être compatible : filter: alpha (alpha=value) ;.

Questions et réponses connexes1

CSS rend l'arrière-plan transparent et le contenu opaque

2. Le fond de la toile est opaque, mais certains éléments à l'intérieur sont transparents (semblable à un effet creux)

3 Comment rendre le fond CSS transparent et le texte opaque

[Recommandations associées 】1. Tutoriels vidéo gratuits sur le site Web php chinois :

"Tutoriel vidéo php.cn Dugu Jiujian (2)-css"

2. Articles connexes sur le site php chinois :Résumé sur les paramètres de translucidité en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!