Partagez comment gérer les styles translucides en CSS

Dans les projets, nous rencontrons souvent des situations où nous devons définir la translucidité, comme des images, du texte, des conteneurs, des arrière-plans, etc. Chaque fois que nous l'utilisons, nous oublions comment le faire. Maintenant, j'ai le temps de faire un résumé. pour ma propre commodité, et aussi le partager avec les autres, si vous avez besoin de quelque chose, vous pouvez venir y jeter un œil.

1. Le conteneur de l'élément est transparent

 .div{
opacity: 0.5;   /* Firefox、Chorme、Opera等主流浏览器识别 */
filter:alpha(opacity=50);   /* IE6及以上IE浏览器识别 */
 }

Instructions :

1. Opacité :* prend une valeur comprise entre 0 et 1. de entièrement transparent De plus en plus vers l'opacité, la valeur par défaut est opaque après avoir dépassé 1

2. filter:alpha(opacity= *) prend une valeur comprise entre 0 et 100, la même que ci-dessus ; 3. Utilisez cet attribut Enfin, tous les sous-éléments du conteneur d'éléments seront hérités, c'est-à-dire qu'ils seront tous translucides.

2. L'arrière-plan de l'élément est transparent

Instructions :

 .div{
     background: rgba(0,0,0,.5);    /* Firefox、Chorme、Opera等主流浏览器识别 */ 
     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#7f000000, endColorStr=#7f000000);   /* IE6及以上IE浏览器识别 */
 }

1. , n C'est de la transparence, la valeur est comprise entre 1 et 100, la même que la première ci-dessus

2 startColorStr=m, endColor=n où m et n sont composés de deux parties, les 2 premières. les chiffres sont la transparence et les 6 bits suivants sont seize valeurs de couleur. Par exemple, 7f représente une transparence de 0,5, et 000000 est noir (ne peut pas être abrégé en 000)

3. Dans le deuxième point, lorsque m=n, il est uniformément transparent, et lorsque ≠, il est uniformément transparent. est dégradé transparent. Vous trouverez ci-dessous un ensemble des deux premières données de transparence correspondant à une valeur, au format de valeur de transparence RVB - valeur IEfilter :

0,1 -- 19 | 4c | 0,4 -- 66 | 0,5 -- 7f | 0,6 -- 0,7 -- b2 | Les navigateurs IE7 et supérieurs prennent directement en charge les images translucides. Il existe de nombreuses méthodes, et les experts ont résumé près de 7 ou 8 méthodes. Celle que j'utilise couramment est la suivante :

1 Tout d'abord, téléchargez png.js en ligne.

2. En bas de votre page, chargez ce paragraphe entre la balise de fermeture body et la balise de fermeture html :

3. Assurez-vous ensuite que le chemin n'est pas mal écrit. Enfin, ajoutez simplement le nom de l'élément d'image ou la classe et le nom de l'ID qui doivent être translucides dans DD_belatedPNG.fix("").

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!