javascript - Div 元素顶部的水印效果

Question

不确定是否可能，但询问无害。

我有一个显示发票的页面。可以选择通过按钮作废发票。我想要做的是在整个页面上创建水印效果，但它必须位于页面内容的顶部。

我尝试在发票容器 DIV 元素上使用图像和 CSS 背景，但如果发票内容本身会被隐藏。下面是我在类里面使用的 CSS 样式

background-image:url(/images/icons/void.png); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:35% 55%;

如果有人有任何解决方案，无论是 CSS 还是 Javascript，...将不胜感激。再次感谢。

Answer 1

简单的 CSS

#voidBox {
    position : absolute;
    top : 20px; /*Change to Desired Position from top of screen*/
    left : 20px; /*Change to Desired Position from left of screen*/
    z-index : 1000; /*Sets element above everything else (only works on absolute and fixed position elements)*/
    background : url('/images/icons/void.png') no-repeat;
    display : none;
}

然后当按钮被按下时，做一些简单的JS

document.getElementById('voidBox').style.display = 'block';