Question

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

OnTimer()

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

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

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>

透明彩色覆盖背景图像

1 个答案: