Css 如何布局透明的水印图像以及横幅图像和内容div？

我被要求创建一个包含此水印的布局。它的放置方式必须确保左端点位于左侧边栏DIV中，顶部对标题图像透明，底部对内容DIV是背景图像

我根据我的JSFIDLE在CSS中尝试了绝对定位：

这更接近我需要的。但是，我不确定如何调整所讨论的元素的z索引值，使其看起来像模型。有人能提供一些建议值吗？我的理解是，z索引值越高，图像在“堆栈”中的位置就越高。对吗？

这是我的建议：

给你的正文和html一个100%的宽度。 创建一个新的Div，称为类似于水印容器的东西，并使用绝对位置将其宽度设置为100%。 在该div中，制作另一个称为水印的函数，并给它一个绝对位置，然后你可以给它一个左：50%，然后一个负的左边距，将它放置在你想要的确切位置

这将确保无论屏幕大小如何，水印始终放置在正确的位置

代码如下：

body, html {
    width:100%;
}

#watermarkCont {
    width:100%;
    height:100%; //or if you want to just make this a px amount, it might not take 100% height
    position:absolute;
    top:0;
} 

#watermark {
    background-image:url("/*image*/");
    width: /*whatever the image width is*/;
    height: /*whatever the image height is*/;
    position:absolute;
    left:50%;
    margin-left:-200px;
}

这种方法通常用于绝对定位元件的居中。负数的左边距通常是元素宽度的一半，但在这种情况下，您将更多地向左推进，因此如果需要，将其设置为更大的负数

---

放置后，为每个元素指定正确的z索引，您的大水印应该能够在不需要切割的情况下放置到位。

JSFIDLE示例中的图像不起作用。你能不能也包括一个你想让它看起来怎么样的图像模型。我刚把它贴上。那么水印是不同的吗？你为什么不把它做成一个图像呢。并使用固定定位。因此，一件一件，固定定位，并更改不透明度，您可能需要更改z索引，使其显示在另一件上面。我想这就是我该怎么做我该如何在所有3个div中加入水印？谢谢你的回答。要确认，水印和水印容器的z索引值应高于内容和标题div？正确，除非您需要能够单击某些内容，如导航。否则就可以了。请记住，您还需要指定{position:；}以具有z索引

background-image: url(/Content/Images/logo.png);
background-repeat: no-repeat;
height: 560px;/* height of page */
background-position: 50% 50%;
background-size: 300px 300px; /* width height of Image */
padding: 16px; /* as per need */

body, html {
    width:100%;
}

#watermarkCont {
    width:100%;
    height:100%; //or if you want to just make this a px amount, it might not take 100% height
    position:absolute;
    top:0;
} 

#watermark {
    background-image:url("/*image*/");
    width: /*whatever the image width is*/;
    height: /*whatever the image height is*/;
    position:absolute;
    left:50%;
    margin-left:-200px;
}

background-image: url(/Content/Images/logo.png);
background-repeat: no-repeat;
height: 560px;/* height of page */
background-position: 50% 50%;
background-size: 300px 300px; /* width height of Image */
padding: 16px; /* as per need */