CSS叠加层使文本变暗。

Question

CSS叠加层使文本变暗。

3

我正在尝试制作一个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>

- Jordan Baron

可能是重复的问题：如何向背景图像添加颜色叠加层？ - yqlim

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ngr900 · Accepted Answer

任何元素的默认 z-index 都是 auto，这意味着它会从其父元素获取 z-index 的值。在你的代码中，只有 .overlay 类被设定了 z-index 的值，且设置为 1，这意味着它将覆盖具有较低 z-index 值的元素，例如你的 .nav 元素。

要解决这个问题，你只需要将 .nav 类的 z-index 值设定比 1 更高即可。请记住，只有设置了定位属性的元素才能拥有 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;
}

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

你也可以考虑其他更加简洁的方法来使图像变暗，例如使用CSS的filter属性。