css - 在所有元素上叠加图案

Question

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

截图如下:

注意:元素内容应可供用户选择。我不想要一个覆盖在其他元素上的 div。

Answer 1

制作一个 .png 文件(或者 .gif，如果你喜欢的话)，然后简单地将它覆盖在你想要这个图案的 div 上。

You need to set the parent element using position relative then use position absolute on the element you want to position. So if you want it to be positioned based on the table you need to add position: relative to the table (which won't do anything because it is already positioned relative) and position: absolute to the overlay. Absolute positioning takes the element out of the document flow and relative positioning leaves it in the document flow which is why stuff is being moved around. The reason for this is based off how CSS works: http://www.w3schools.com/css/pr_class_position.asp

relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

absolute The element is positioned relative to its first positioned (not static) ancestor element

Source: Position overlay 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 */
}

关于点击槽，看看这个答案:Click through a DIV to underlying elements