背景图像上的透明彩色叠加层[重复]答案

【问题标题】：transparent colored overlay over background image [duplicate]背景图像上的透明彩色叠加层[重复]
【发布时间】：2018-08-09 19:19:40
【问题描述】：

我正在尝试创建背景图像，然后在其上创建透明颜色。但是，我遇到的问题是整个网站都获得了透明代码。我想知道为什么以下方法不起作用：

小提琴：http://jsfiddle.net/bzvrwqhu/2/

html {
  background: url('https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg?cs=srgb&dl=food-dinner-lunch-70497.jpg&fm=jpg') no-repeat center center fixed;
  backgorund-size: cover;
  color: #FFF;
}

.content {
  z-index: 2;
}

.curtain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(11, 150, 113, 0.5);
    z-index: 1;
  }

<div class="curtain"></div>
<div class="content">
  My Content
</div>

如果您查看小提琴，您会发现文本上也有渐变。我不明白为什么会这样。这 2 个元素处于同一级别，我已将 z-index 2 应用于包含内容的元素。那么它不应该坐在上面不受颜色的影响吗？

【问题讨论】：

标签： html css

【解决方案1】：

z-index 仅适用于定位元素（即不是静态位置）。所以添加position:relative 来激活z-index：

html {
  background: url('https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg?cs=srgb&dl=food-dinner-lunch-70497.jpg&fm=jpg') no-repeat center center fixed;
  backgorund-size: cover;
  color: #FFF;
}

.content {
  z-index: 2;
  position:relative;
}

.curtain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(11, 150, 113, 0.5);
    z-index: 1;
  }

<div class="curtain"></div>
<div class="content">
  My Content
</div>

【讨论】：