在所有元素上覆盖图案

是否可以将图像（图案）放置在2个或更多元素上（背景不同）？（类似图案填充在Adobe Photoshop）在所有元素上覆盖图案

以下是截图： enter image description here

注：元素的含量应该是可选择的用户。我不想要一个在其他元素上结束的div。

来源

2012-12-25 mrdaliri

的图像与铺设在背景色条纹之间的透明区域的条纹。调整元素的背景位置，使条纹相遇。 –

@DavidThomas：它完成1个元素的工作。那么别人呢？（在屏幕截图中，我们有2个主要元素，导航栏和网站标志）。 – mrdaliri

什么样的HTML会是什么？ –

创建一个.png文件（或.gif，如果你愿意的话），并简单地覆盖这个div你希望有这种模式。

您需要使用相对位置设置父元素，然后在要定位的元素上使用绝对位置。所以如果你希望根据表格定位你需要添加的位置：相对于表格（它不会做任何事情，因为它已经定位到相对位置）和位置：绝对覆盖。绝对定位将元素排除在文档流之外，相对定位将其留在文档流中，这就是为什么东西被移动的原因。这样做的原因是基于关闭CSS是如何工作的：http://www.w3schools.com/css/pr_class_position.asp

相关元素相对于它的正常位置定位，使“左：20”，增加了20个像素单元的左侧位置

绝对元素的定位相对于它的第一被定位（未静态）祖先元素

来源：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

来源

2012-12-25 12:28:04 Jelmer

@这是你的代码：http://jsfiddle.net/C3Pkr/1/ ..（我改变背景图像的颜色，并添加一个不透明的像透明背景图像）..但内容不能由用户选择。例如，“链接＃1”不能被点击。 – mrdaliri

添加属性'pointer-events：none;'我会更新我的帖子。 http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements – Jelmer

哇！谢谢Jelmer，我对“指针事件”一无所知...... – mrdaliri

在所有元素上覆盖图案

回答

相关问题