Html 在div[z-index]后面隐藏图像

我想将两幅图像部分隐藏在中间/主分区后面，就像我所包含的图片上显示的一样[图像为蓝色，中间分区为棕色，较深的蓝色是图像中应该隐藏在分区后面的部分]。这两个图像作为标记包含在HTML中。它们必须是HTML的一部分，而不是通过CSS注入。 图像的定位不是问题，但重叠/隐藏是问题。我通过z索引尝试了很多次，但都没有成功

有人能帮忙吗

---

链接到图片

在没有看到HTML/CSS的情况下，诊断问题会变得更加困难，但听起来好像是在混淆body元素和positioned元素。Z-index不适用于主体元素，因此您应该尝试将蓝色图像放置到div中，并将该div拉到棕色div后面

---

您可以在这篇老文章中找到更多信息和JSFIDLE示例：

如果您希望将它们部分隐藏在主div后面，您可以设置父容器您的body标记（如果没有其他内容包含主div），并使用背景图像在css中添加图像：urlimage1.png，urlimage2.png；然后是背景位置：左中、右中；。还可以使用像素或百分比分别确定水平和垂直方向的位置。这样，您就不必担心z索引了

但是，这和z索引都不能解决图像部分可见的另一个问题。为此，您可以使用背景设置主div背景的颜色和不透明度：rgba0，0，0，0；，其中，前三个零可以是0到255之间的任意数字，表示红色、绿色和蓝色，第四个零表示0到1之间的任意数字，作为决定不透明度的小数。数字越小，背景越透明。它越透明，你就越能看到它背后的图像

---

或者，可以使用不透明度：0；与上述方法相同

实际问题是什么？是不是z-index没有改变元素的顺序？如果是这样，您需要在css中为它们添加一个position属性，比如：position:relative；。