css - 在所有元素上覆盖图案

Question

是否可以将图像（图案）放在 2 个或更多元素（具有不同背景）上？（类似于 Adob​​e Photoshop 中的图案填充）

这是一个屏幕截图：

注意：元素内容应该由用户选择。我不想要一个覆盖其他元素的 div。

Answer 1

制作一个 .png 文件（或 .gif，如果您愿意的话），然后简单地将其覆盖在div您想要此模式的文件上。

您需要使用相对位置设置父元素，然后在要定位的元素上使用绝对位置。因此，如果您希望它基于表格定位，您需要添加 position: relative to the table （这不会做任何事情，因为它已经相对定位）和 position: absolute 叠加。绝对定位将元素从文档流中取出，而相对定位将其留在文档流中，这就是为什么要移动内容的原因。其原因是基于 CSS 的工作原理：http ://www.w3schools.com/css/pr_class_position.asp

relative 元素是相对于它的正常位置定位的，所以 "left:20" 在元素的 LEFT 位置上增加了 20 个像素

absolute 元素相对于它的第一个定位（非静态）祖先元素定位

来源：位置叠加 div

代码示例：

<div class="overlay">
    <div class="overlay-content">
    </div>
    Content goes here
</div>

对于CSS：

div.overlay{
    position: relative;
}

div.overlay-content{
    position: absolute;
    top: 0;
    left :0;
    width: 100%;
    height: 100%;
    background: url(path/to/image.png) repeat top left;
    pointer-events:none; /* To be able to click through */
}

关于点击槽，看看这个答案：点击一个DIV到底层元素