Question

我正在尝试使div覆盖另一个div，以使背景图像显得更暗。它可以工作，但不是使图像变暗，而是使所有内容（例如文本）变暗。即使叠加层div位于其中包含文本元素的其他div之前，

以下是显示正在发生的事情的代码段：

.header {
    background: url("http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg") no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    color: white;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    opacity: 0.5;
}

.heading {
    display: inline-block;
    font-size: 3em;
}

.nav-item {
    font-size: 1.3em;
    float: right;
    list-style-type: none;
    padding: 0px 5px;
}

.nav-item > a {
    color: white;
    font-weight: bold;
    display: block;
}

a {
    color: black;
    text-decoration: none;
}

<div class="header">
        <div class="overlay"></div>
        <div class="nav">
            <!-- <img src="img/logo.png" alt="logo" class="logo"> -->
            <li class="nav-item"><a href="https://jordanbaron.github.io">Home</a></li>
            <li class="nav-item"><a href="#about" >About</a></li>
            <li class="nav-item"><a href="#portfolio" >Portfolio</a></li>
            <li class="nav-item"><a href="#contact">Contact</a></li>
        </div>
        <h1 class="heading" id="heading"></h1>
    </div>

Answer 1

任何元素的默认z-index是auto，这意味着它从其父级获取z-index。在您的代码中，只有.overlay类具有z-index并将其设置为1，这意味着它将被放置在具有较低z-index的元素前面，例如{ {1}}元素。

要解决此问题，您只需为.nav类分配一个比z-index高的1。请记住，只有定位的元素可以具有.nav，因此您应该执行以下操作：

z-index

您的代码段已固定：

.nav {
  position: relative;
  z-index: 2;

.header {
    background: url("http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg") no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    color: white;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    opacity: 0.5;
}

.heading {
    display: inline-block;
    font-size: 3em;
}

.nav-item {
    font-size: 1.3em;
    float: right;
    list-style-type: none;
    padding: 0px 5px;
}

.nav-item > a {
    color: white;
    font-weight: bold;
    display: block;
}

a {
    color: black;
    text-decoration: none;
}

.nav {
    position: relative;
    z-index: 2;
}

您可能还需要考虑其他更清洁的使图像变暗的方法，例如CSS <div class="header"> <div class="overlay"></div> <div class="nav">  <li class="nav-item"><a href="https://jordanbaron.github.io">Home</a></li> <li class="nav-item"><a href="#about" >About</a></li> <li class="nav-item"><a href="#portfolio" >Portfolio</a></li> <li class="nav-item"><a href="#contact">Contact</a></li> </div> <h1 class="heading" id="heading"></h1> </div>属性。

CSS叠加使文本变暗

1 个答案: