Question

我的预编码页面编码如下：

    <div id="linearBg">
            <div id="wrapper">
                    <div class="logo"></div>
                    <div class="navigation"></div>
                    <div class="video"></div> 
                    <div class="content"></div>
            </div>
    </div>

其中linearBg是渐变背景，网站的背板。包装器是内部div的容器，其余的是面向内容的。

所以我已经用样式和各种各样的方式实现了这个，但是我想补充一点：

<div class="watermark"></div>

在内容和视频div之下/之后，有点像反向水印，

我尝试过z-indexing，但我不是专家。你可以指导我做到这一点吗？

http://jsfiddle.net/nEWCP

我只需要在视频和内容div之后获得水印。

Answer 1

这样的东西？ http://jsfiddle.net/yXTYM/3/

诀窍是：

position: relative关于视频和内容div
position: absolute在水印div上没有定位，因此它从前一个元素（nav）结束的地方开始
height: 100%在水印上，以便它跨越到包装的底部
overflow: hidden在包含div上，以便水印不会在其下方延伸

如果这是您的想法，请告诉我。

Answer 2

根据您的描述，我认为您甚至不需要新的HTML元素。如果你想要一个你所描述的“反向水印”，听起来你想要在内容和视频元素背后有不同的背景。与渐变不同的东西。

您真正需要做的就是在CSS中定义一个类，在您需要时添加水印。

这是a basic example。橙色仅模拟视频和内容背后的水印。

.watermark { background: url('/path/to/watermark.png'); }

<div id="linearBg">
    <div id="wrapper">
        <div class="logo"></div>
        <div class="navigation"></div>
        <div class="video watermark"></div> 
        <div class="content watermark"></div>
    </div>
</div>

Answer 3

http://jsfiddle.net/82saE/

我想我拥有你所追求的东西 - 一个反映linearBg尺寸的包裹元素 - 给你一个带有重复图像的渐变背景。

在已经制作的内容之间索引图像

3 个答案: