如何覆盖2个以上的div(如果可能的话，使用引导程序)

Question

我正试图用z索引将4个div叠加在一起

它似乎只适用于2divs

当我试图模糊主bg(第一个bg(时，它会影响所有的div

我做错了什么？

这是代码：

HTML-

<div class="bg1">
<div class="bg2">
<div class="overlay">
<div class="text-layer">
<p>Eleven years ago, wizards rejoiced all over the world, and Muggles (non-magic folk) were confused. They celebrated because He-Who-Must-Not-Be-Named was defeated. In other words, Voldemort (the evilest wizard around) killed Harry Potter's parents,
but for some strange reason, he couldn't kill little baby Harry. Now Voldemort seems to have disappeared. Overnight, baby Harry has become a hero – "The Boy Who Lived." Having lost his family and home, Harry also has become an orphan. Dumbledore
(the principle of Hogwarts School of Wizardry and Witchcraft), Professor McGonagall (a teacher at Hogwarts), and Hagrid (a groundskeeper at Hogwarts) find a home for baby Harry with his Muggle extended family, the Dursleys.</p>
<p>Cut to present day, when ten-year-old Harry lives with his super-mean aunt and uncle and their son Dudley. When they go to the zoo for Dudley's birthday, Harry encounters a sympathetic snake. He's able to speak to the friendly reptile and somehow
seems to have removed the glass from its cage, so it can go back to Brazil. After the trip to the zoo, mysterious letters start arriving for Harry. His uncle, Mr. Dursley, is furious and tries to keep them from Harry. But the letters keep arriving
at such a rapid rate that, the evening before Harry's eleventh birthday, his uncle takes the whole family to a deserted island to escape all of the mail.</p>
<p>They can't hide for long, though; Hagrid shows up on Harry's birthday to deliver the letter, and the news that Harry's a wizard and has been admitted to the Hogwarts School of Witchcraft and Wizardry. The next day he takes Harry to shop for school
supplies at Diagon Alley, where Harry learns more about the wizarding world. He meets Malfoy (a bully) and Hogwarts' new Defense Against the Dark Arts professor, Quirrell. Harry also buys his first wand. Sweeeet. Hagrid also picks up a mysterious
package at Gringotts, the goblin bank.</p>
</div>
</div>
</div>
</div>

CSS-

.bg1 {
position: relative;
background-image: url("http://www.hdnicewallpapers.com/Walls/Big/Flowers/Sun_Flower_HD_Image.jpg");
left: 0px;
top: 0px;
z-index: -1;
filter: blur(4px);
-webkit-filter: blur(4px);
}
.bg2 {
background-image: url("https://www.w3schools.com/howto/img_girl.jpg");
height: 100%;
z-index: 1;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: opacity(30%);  /* Safari 6.0 - 9.0 */
filter: opacity(40%);
}
.overlay {
z-index: 2;
position: relative;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.text-layer {
height: 100%;
height: 100vh;
z-index: 300 !important;
}

这是jsfiddle-jsfddle

Answer 1

我必须稍微更改您的HTML结构才能实现您想要的。我的想法是将text-layer作为顶层，并将背景和覆盖层设置为其100%的宽度和高度(通过absolute定位(。

<div class="text-layer">
<div class="bg1"></div>
<div class="bg2"></div>
<div class="overlay"></div>
<div class="text-content">
<!-- I just added container here for fun -->
<div class="container">
<!-- text -->
</div>
</div>
</div>

以下是款式。

注意：z-index仅适用于已定位的元素，即relative、absolute或fixed。

.text-layer {
position: relative;
}
.bg1, .bg2, .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.bg1 {
background-image: url("http://www.hdnicewallpapers.com/Walls/Big/Flowers/Sun_Flower_HD_Image.jpg");
background-repeat: no-repeat;
filter: blur(4px);
-webkit-filter: blur(4px);
z-index: 1;
}
.bg2 {
background-image: url("https://www.w3schools.com/howto/img_girl.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-filter: opacity(30%);
/* Safari 6.0 - 9.0 */
filter: opacity(40%);
z-index: 2;
}
.overlay {
background: rgba(0, 0, 0, 0.3);
z-index: 3;
}
.text-content {
/* 
* I have to set this to relative in order to use z-index, because the 
* default is static. See the note.
*/
position: relative;
padding: 1rem;
z-index: 4;
}

小提琴：http://jsfiddle.net/aq9Laaew/101650/

Answer 2

.bg1 {
position: relative;
background-image: url("http://www.hdnicewallpapers.com/Walls/Big/Flowers/Sun_Flower_HD_Image.jpg");
left: 0px;
top: 0px;
z-index: -1;
overflow: hidden;
}
.bg1:before{
content: "";
position: absolute;
width : 100%;
height: 100%;
background: inherit;
z-index: -1;
filter        : blur(10px);
-moz-filter   : blur(10px);
-webkit-filter: blur(10px);
-o-filter     : blur(10px);
transition        : all 2s linear;
-moz-transition   : all 2s linear;
-webkit-transition: all 2s linear;
-o-transition     : all 2s linear;
}
.bg2 {
background-image: url("https://www.w3schools.com/howto/img_girl.jpg");
height: 100%;
z-index: 1;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: opacity(30%);
/* Safari 6.0 - 9.0 */
filter: opacity(40%);
}
.overlay {
z-index: 2;
position: relative;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.text-layer {
height: 100%;
height: 100vh;
z-index: 300 !important;
}

<div class="bg1">
<div class="bg2">
<div class="overlay">
<div class="text-layer">
<p>Eleven years ago, wizards rejoiced all over the world, and Muggles (non-magic folk) were confused. They celebrated because He-Who-Must-Not-Be-Named was defeated. In other words, Voldemort (the evilest wizard around) killed Harry Potter's parents,
but for some strange reason, he couldn't kill little baby Harry. Now Voldemort seems to have disappeared. Overnight, baby Harry has become a hero – "The Boy Who Lived." Having lost his family and home, Harry also has become an orphan. Dumbledore
(the principle of Hogwarts School of Wizardry and Witchcraft), Professor McGonagall (a teacher at Hogwarts), and Hagrid (a groundskeeper at Hogwarts) find a home for baby Harry with his Muggle extended family, the Dursleys.</p>
<p>Cut to present day, when ten-year-old Harry lives with his super-mean aunt and uncle and their son Dudley. When they go to the zoo for Dudley's birthday, Harry encounters a sympathetic snake. He's able to speak to the friendly reptile and somehow
seems to have removed the glass from its cage, so it can go back to Brazil. After the trip to the zoo, mysterious letters start arriving for Harry. His uncle, Mr. Dursley, is furious and tries to keep them from Harry. But the letters keep arriving
at such a rapid rate that, the evening before Harry's eleventh birthday, his uncle takes the whole family to a deserted island to escape all of the mail.</p>
<p>They can't hide for long, though; Hagrid shows up on Harry's birthday to deliver the letter, and the news that Harry's a wizard and has been admitted to the Hogwarts School of Witchcraft and Wizardry. The next day he takes Harry to shop for school
supplies at Diagon Alley, where Harry learns more about the wizarding world. He meets Malfoy (a bully) and Hogwarts' new Defense Against the Dark Arts professor, Quirrell. Harry also buys his first wand. Sweeeet. Hagrid also picks up a mysterious
package at Gringotts, the goblin bank.
</p>
</div>
</div>
</div>
</div>