Bolehkah div kanak-kanak mengatasi gaya ibu bapa dan bertindak sebagai portal?

Question

Saya mahu mencipta div induk yang mengandungi div anak. Gaya induk ialah width:100vw;height:100vh;position:fixed;background-color:rgb(000/0.25);backdrop-filter:blur(2px);z-index:8888;top:0;left:0; anak Gaya ialah background-color:transparent;width:200px;height:200

P粉043432210 · Answer

--Edit--

Jika persoalannya ialah bagaimana untuk memulihkan penapis latar belakang dalam div kanak-kanak, anda boleh menggunakan

backdrop-filter: none;

Namun, jika anda ingin mewarisi harta ini daripada ibu bapa ibu bapa, anda perlu melakukannya dalam JavaScript

element.style.backdropFilter = element.parentNode.parentNode.style.backdropFilter;

Tiga cara untuk melakukan ini dalam CSS

1 Gunakan kedudukan div relatif

div : {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  background-clip: text;
  z-index: 8888;
  top: 0;
  left: 0;
}

div div {
  background-color: transparent;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;
}

2 ID penggunaan

#mainID : {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  background-clip: text;
  z-index: 8888;
  top: 0;
  left: 0;
}

#subDivID {
  background-color: transparent;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;
}

3 kelas penggunaan

.mainID : {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  background-clip: text;
  z-index: 8888;
  top: 0;
  left: 0;
}

.subDivClass {
  background-color: transparent;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;
}