Bagaimana untuk menetapkan kelegapan div dalam css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan kelegapan div dalam css

藏色散人

Lepaskan： 2023-01-07 11:45:36

asal

2855 orang telah melayarinya

Cara untuk menetapkan kelegapan div dalam css: 1. Gunakan atribut kelegapan elemen untuk menetapkan kesan lapisan topeng 2. Tetapkan induk p menjadi lutsinar dan anak p menjadi legap melalui atribut seperti opcity.

Bagaimana untuk menetapkan kelegapan div dalam css

Persekitaran pengendalian artikel ini: sistem windows7, versi HTML5&&CSS3, komputer DELL G3

Cara menetapkan div legap dengan css ?

CSS melaksanakan lapisan topeng gaya utama ialah: warna latar belakang: # ooo; kelegapan: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>

Salin selepas log masuk

Analisis sebab: Gunakan atribut opcity css untuk menukar ketelusan elemen, tetapi ketelusan sub-elemen di bawahnya juga akan diubah, malah mentakrifkannya semula tidak berguna, tetapi ada cara untuk mencapainya, anda boleh lihat.

Anda boleh menggunakan gambar lutsinar sebagai latar belakang untuk mencapai kesan, tetapi adakah cara yang lebih mudah?

Gunakan RGBA.

Penjelasan: Ini ialah kod lutsinar hitam (tetapkan warna latar belakang dan tetapkan kelegapan (transparensi, julat nilai 0-1))

<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>

Salin selepas log masuk

Tiga nilai pertama mewakili nilai merah, hijau dan biru warna

Nilai terakhir mewakili nilai alfa, iaitu nilai ketelusan dan kelegapan ialah 1

　(Disokong IE8 dan semua penyemak imbas moden)

Induk p menggunakan rgba, dan kesannya baik, seperti yang ditunjukkan di bawah; 🎜>

Bagaimana untuk menjadikan ibu bapa p telus dan anak p telus Bagaimana pula dengan kelegapan? Anda juga boleh merujuk kepada coretan kod berikut:

Teks asal:

Kesannya adalah seperti berikut:

<!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>

Salin selepas log masuk

Disyorkan kajian: "

tutorial video css

》

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelegapan div dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!