0

我有一个编码如下的预代码页：

    <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是渐变背景，网站的背板。Wrapper 是内部 div 的容器，其余的都是面向内容的。

所以我已经用样式和各种方式实现了这个，但我想添加：

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

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

我试过 z-indexing 但我不是专家。你能指导我做这件事吗？

http://jsfiddle.net/nEWCP

我所需要的只是获取视频和内容 div 背后的水印。

4

3 回答 3

2

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

诀窍是：

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

让我知道这是否是您的想法。

于 2012-10-15T15:59:19.423 回答
0

http://jsfiddle.net/82saE/

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

于 2012-11-26T21:58:43.910 回答
0

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

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

这是一个基本的例子。橙色仅在视频和内容后面模拟您的水印。

.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>
于 2012-11-23T19:59:32.933 回答