在CSS理论中分层

Question

因此，如果您了解photoshop中的图层，它基本上就像自上而下的照片一样，您可以将图层的某些部分放在正面或背面，然后重新排列等等。

我无法使用HTML / CSS复制此概念。 基本上，我想要做的是： 1）背景图像（最底层）

    html { 
      background-image: url('website.com/pic.jpg');
      background: no-repeat center fixed cover;
    }

2）覆盖背景图像的黑色不透明矩形（倒数第二个）

    body { 
      background: rgba(0, 0, 0, 0.5);
      background-size: cover;

    }

3）内容/文字（顶层）

    .content { }

不确定CSS的其他部分需要使分层效果起作用。高度始终为0，加高度：100％;什么都不做。

Answer 1

你需要三件事：

• 将图片的display属性从inline-block更改为block
• 将图片的position属性和图层从relative更改为absolute
• 指定图层和图像的堆叠顺序（z-index）属性。具有最低z-index值的元素将放置在底部，具有最高值的元素将放置在其他元素之上。