Question

我的问题是我想在图像类上放置绿色滤镜。我使用了z-index属性，但工作原理并不相同。过滤器不显示upp。我应该使用z-index属性还是其他方法？

这是我的主要代码：

header {
  height: 300px;
  width: 100%;
  position: relative;
  z-index: 0
  }
            
.black-filter { /*Not working for some reason*/
  height: 100%; 
  width: 100%; 
  position: absolute; 
  top: 0; 
  left: 0;
  z-index: 8;
  background-color: #66fb04a8
} 
         
.image {
  width: 100%;
  position: absolute
  ; top: 0;
  left: 0;
  z-index: 5;
  height: 100%;
  width: 100%;
  background-image: url('https://images.pexels.com/photos/209137/pexels-photo-209137.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');     
  background-size: cover; 
  filter: blur(2px)
 }
           
nav {
  width: 100%; 
  position: absolute;
  top: 0; 
  left: 0; 
  z-index: 10; 
  background: 
  hsla(0, 0%, 100%, 0);
  overflow: hidden;
 }

<header id="myHeader"r>
  <div class="black-filter">
    <div class="image"></div>
    
    <!--Navigation Bar-->
    <nav>
        Löksås ipsum blivit kunde vidsträckt inom tre räv, precis år enligt ser hwila. Tiden blivit smultron annat färdväg ingalunda dimma, annan rot varit smultron inom hela, kunde och det miljoner groda. Ta annan söka plats precis verkligen annan träutensilierna smultron år sig för, träutensilierna dock annan att år verkligen det ännu rännil bland händer år, brunsås sorgliga groda faktor gamla träutensilierna ordningens dock upprätthållande dock.
    </nav>
    <!--End Navigation Bar-->
      
    </div>
</header>

过滤器为绿色，因此在显示时应清晰辨认。

使用z-index属性时遇到的问题：

当我使用z-index属性时，我遇到了更多问题。我不明白为什么当我使用正数将图像放置在文本下方时，它不起作用。（这是另一个简化的示例）

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {z-index: 2}
            img {position: absolute; top: 0; left: 0; z-index: 1}
        </style>
    </head>
    <body>
        <h1 style="color: #CCC">Text text text</h1>
        <img src="https://placehold.it/100px/100px">
    </body>
</html>

但是如果我使用负值，它会起作用：

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {z-index: -1}
            img {position: absolute; top: 0; left: 0; z-index: -2}
        </style>
    </head>
    <body>
        <h1 style="color: #CCC">Text text text</h1>
        <img src="https://placehold.it/100px/100px">
    </body>
</html>

Answer 1

您需要首先为h1形成一个stacking context。堆栈上下文的形成标准之一是将元素设置为relative或absolute的位置。 Flexbox和Grid子级也会创建堆叠上下文。这些只是构成堆叠上下文的许多条件中的一部分。有关更多示例，请参考下面的MDN链接。

来自MDN：

堆栈上下文是HTML的三维概念相对于用户（假设用户）沿假想z轴的元素面向视口或网页。 HTML元素占据了这个位置根据元素属性按优先级顺序排列空间。

在您的示例中，图像已经是其自身堆叠上下文的一部分，由绝对定位触发，我将在position: relative上设置h1，以便形成堆叠上下文并显示在img。

<!DOCTYPE html>
<html>

<head>
  <style>
    h1 {
      z-index: 2;
      position: relative;
    }
    
    img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  </style>
</head>

<body>
  <h1 style="color: #CCC">Text text text</h1>
  <img src="https://placehold.it/100px/100px">
</body>

</html>

Answer 2

我找到了解决该问题的方法。我只将文本与视觉效果（例如带有模糊和绿色滤镜的图像）分开。然后，我删除了z-index属性及其所有附件，因为不需要它们。过滤器将仅放在模糊的图像上，文本将放置在它们上面。不太专心，不是吗？！

这是工作代码：

 body {padding: 0; margin: 0}
            
            header {height: 300px; width: 100%}
            
            
            header .image {width: 100%; height: 100%;  background-image: url('https://images.pexels.com/photos/209137/pexels-photo-209137.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260'); background-size: cover; filter: blur(8px)}

            
            header .image .black-filter {height: 100%; width: 100%; background: rgba(248, 248, 1, 0.22)} 
         
           
            header nav {width: 100%; position: absolute; top: 0; left: 0; z-index: 4; background: hsla(0, 0%, 100%, 0); overflow: hidden;}

<header id="myHeader"r>

<div class="image"><div class="black-filter"></div></div>

<nav>
        Löksås ipsum blivit kunde vidsträckt inom tre räv, precis år enligt ser hwila. Tiden blivit smultron annat färdväg ingalunda dimma, annan rot varit smultron inom hela, kunde och det miljoner groda. Ta annan söka plats precis verkligen annan träutensilierna smultron år sig för, träutensilierna dock annan att år verkligen det ännu rännil bland händer år, brunsås sorgliga groda faktor gamla träutensilierna ordningens dock upprätthållande dock.
</nav>

</header>

我应该使用z-index属性还是其他方法？

2 个答案: