Comment définir l'opacité div en CSS-Questions et réponses frontales-php.cn

Comment définir l'opacité div en CSS

藏色散人

Libérer： 2023-01-07 11:45:36

original

2924 Les gens l'ont consulté

Comment définir l'opacité div en CSS : 1. Utilisez l'attribut opacity de l'élément pour définir l'effet du calque de masque ; 2. Définissez le parent p pour qu'il soit transparent et l'enfant p pour qu'il soit opaque via des attributs tels que l'opcity.

Comment définir l'opacité div en CSS

L'environnement d'exploitation de cet article : système windows7, version HTML5&&CSS3, ordinateur DELL G3

Comment définir l'opacité div en css ?

CSS implémente le calque de masque, le div parent est transparent et le div enfant est opaque

Utilisez l'attribut opacity de l'élément pour définir l'effet du calque de masque. Le style principal est : background-color : #ooo ; opacity:0.3;

<p style="width:500px; height:500px;position:fixed; top :0px;background-color:#000;opacity:0.3;text-align:center">
      <p style="float:right; width:100px;height:100%; z-index:10;line-height:500px;background-color:blue;opacity:1;">dfaaf
      </p>
</p>

Copier après la connexion

Analyse des causes : Utiliser l'attribut opcity de CSS pour modifier la transparence d'un élément modifiera également la transparence des sous-éléments sous l'élément. Même s'il est redéfini, cela ne servira à rien. Cependant, il existe un moyen d’y parvenir, vous pouvez y jeter un œil.

Vous pouvez utiliser une image transparente comme arrière-plan pour obtenir l'effet, mais existe-t-il un moyen plus simple ? Utilisez RGBA.

<p style="width:500px; height:500px;position:fixed; top :0px;background-color:#000;background: rgba(0, 0, 0, 0.5);text-align:center">
<p style="float:right; width:100px;height:100%; z-index:10;line-height:500px;background-color:blue;opacity:1;">dfaaf
</p>
</p>

Copier après la connexion

Explication : Ceci est le code pour la translucidité noire (définir la couleur d'arrière-plan et définir l'opacité (transparence, plage de valeurs 0-1))

　　　　Les trois premières valeursreprésentent le rouge, le vert et valeurs bleues de la couleur

　　　Le dernier représente la valeur alpha, qui est la valeur de transparence, et l'opacité est de 1

　　　 (Prend en charge IE8+ et tous les navigateurs modernes)

Parent p utilise rgba, l'effet est OK, comme indiqué ci-dessous

Comment implémenter le niveau parent p est transparent, mais le sous-p est opaque ? Vous pouvez également vous référer à l'extrait de code suivant :

Texte original :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css外层p半透明内层p不透明-弹出层效果的实现【实例】</title>
    <style type="text/css">
        <!--
        body,td,th {
            font-size: 12px; padding:0; margin:0;
        }
        .tanchuang_wrap{ width:600px; height:400px;position:absolute;left: 0px;top: 0px;z-index:100; display:none;}
        .lightbox{width:600px;z-index:101; height:400px;background-color:red;filter:alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2; position:absolute; top:0px; left:0px;}
        .tanchuang_neirong{width:353px;height:153px;border:solid 1px #f7dd8c;background-color:#FFF;position:absolute;z-index:105;left: 123px;top: 123px;}
        -->
    </style>
    <script language="javascript">
        function closep(pId){
            document.getElementById(pId).style.display = &#39;none&#39;;
        }
        function displayp(pId){
            document.getElementById(pId).style.display = &#39;block&#39;;
        }
    </script>
</head>
<body>
<p style="width:400px; height:400px; position:relative; text-align:center;">
    <p class="tanchuang_wrap" id="aaaa">
        <p class="lightbox"></p>
        <p class="tanchuang_neirong">
            <p><span onClick="closep(&#39;aaaa&#39;)" style=" cursor:pointer;">关闭</span></p>
            这里是弹窗内容
        </p>
    </p>
    <span onclick="displayp(&#39;aaaa&#39;)" style="cursor:pointer;">点击我</span>
    <p>测试通过，兼容IE6.0、IE7.0、火狐3.6、遨游等各大浏览器</p>
</p>
</body>
</html>

Copier après la connexion

　 L'effet est le suivant :