Comment définir la transparence en CSS-tutoriel HTML-php.cn

Comment définir la transparence en CSS

php中世界最好的语言

Libérer： 2017-11-20 13:23:24

original

4008 Les gens l'ont consulté

Nous avons souvent besoin d'utiliser du code CSS pour définir la transparence d'un DIV au travail. Aujourd'hui, je vais vous présenter comment utiliser une feuille de style CSS pour définir la transparence et la translucidité d'un DIV. J'espère que cela aide tout le monde.

Parlons d'abord du code CSS pour définir la translucidité DIV :

div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}

Copier après la connexion

Explication :

1 filtre : définissez l'effet de filtre translucide pour Win IE, filtre. : alpha (Opacity=80) signifie que l'objet est translucide à 80%, le navigateur Firefox ne le reconnaît pas

2. -moz-opacity : obtenez la translucidité pour Mozilla Firefox, gagnez IE This l'attribut n'est pas reconnu. -moz-opacity:0.5 équivaut à définir la translucidité à 50 %

3. Opacité : prend en charge tous les navigateurs sauf IE, y compris Google. Le dernier est principalement pour Google Chrome. ; signifie définir une translucidité de 50 %

Afin d'observer la translucidité du DIV, nous avons mis en place deux calques DIV, l'un à l'intérieur de l'autre calque DIV, et le DIV externe est nommé ".div-a" ; inclus ci-dessus La classe CSS est nommée ".div-b", formant une boîte ".div-b" et la plaçant à l'intérieur de ".div-a"

Ajoutons la couche inférieure Le l'arrière-plan du DIV est une image et la zone DIV ci-dessus est définie sur noir.

1. D'après l'exemple décrit, le code source HTML translucide n'est pas défini :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>半透明实例在线演示 www.divcss5.com</title> 
<style> 
.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px;} 
.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00} 
</style> 
</head> 
 
<body> 
<div class="div-a"> 
<div class="div-b">DIV半透明实例演示</div> 
</div> 
</body> 
</html>

Copier après la connexion

1. b" sélecteur Ajouter un code de style translucide :

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;

Définir un effet translucide à 60 %

Le code HTML de la page web d'exemple complet est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>半透明实例在线演示 www.divcss5.com</title> 
<style> 
.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px} 
.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00; 
filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6} 
/* CSS注释说明：这里对CSS代码换行是为了让代码在此我要中显示完整，换行后CSS效果不受影响 */ 
</style> 
</head> 
 
<body> 
<div class="div-a"> 
<div class="div-b">实现DIV半透明实例演示</div> 
</div> 
</body> 
</html>

Copier après la connexion

Résumé : D'après les exemples ci-dessus, le premier n'est pas configuré pour être translucide et l'autre est configuré pour être translucide pour réaliser l'effet de translucidité div. Nous pouvons le faire selon vos besoins. Ajustez la valeur de translucidité pour obtenir la translucidité souhaitée, mais vous devez vous rappeler que l'effet de translucidité doit prendre en compte la compatibilité et la prise en charge d'IE, Google, Firefox et d'autres navigateurs, notre code de style translucide doit donc être complet.

Lecture connexe :

Comment mettre fin aux problèmes de compatibilité concernant la transparence dans IE 6, 7 et 8

css : box- shadow Comment définir la transparence ?

css : Explication détaillée de l'attribut border-collapse et de la transparence de l'opacité de la bordure td dans le tableau

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!