Question

我正在尝试使用z-index相互叠加4个div

它似乎仅适用于2个divs

当我尝试模糊主背景色（第一背景色）时，它会影响所有divs

我在做什么错了？

代码如下：

HTML-

Sub tgr()

    With Worksheets("Table1")
        Intersect(.Range("1:29"), .Range("B:B,E:E,H:H")).BorderAround , , 1
    End With

End Sub

CSS-

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

这是jsfiddle- jsfddle

Answer 1

awk '{print $3}'

 .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;
        }

Answer 2

我必须稍微更改您的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/

如何覆盖2个以上的div（如果可能，请使用引导程序）？

2 个答案: