背景图像上的透明彩色叠加层

Question

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

小提琴：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>

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

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