Javascript Div元素顶部的水印效果

不确定这是否可能，但询问也无妨

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

我尝试在invoice container DIV元素上使用image和CSS背景，但如果被invoice内容本身隐藏，则会将其隐藏。下面是我在课堂上使用的CSS样式

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

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

简单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;
}

然后，当按下按钮时，执行一些简单的操作

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

简单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;
}

然后，当按下按钮时，执行一些简单的操作

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

---

这是我做这件事的方法。基本上，您需要在一个容器中将两个div层叠在一起

我的解决方案使用一个发票div，其中包含一个content div和一个void message div。隐藏void消息div，除非容器具有“void”类。然后，使用javascript在容器上切换void类就很简单了

---

我做了一个带注释的jsfiddle来演示：

这是我的方法。基本上，您需要在一个容器中将两个div层叠在一起

我的解决方案使用一个发票div，其中包含一个content div和一个void message div。隐藏void消息div，除非容器具有“void”类。然后，使用javascript在容器上切换void类就很简单了

---

我用注释做了一个JSFIDLE来演示：

使用jyore的解决方案，我修改了CSS和HTML，如下所示

/* CSS */
#VoidBox {
    -webkit-transform:rotate(-20deg);
    -moz-transform:rotate(-20deg);
    -o-transform:rotate(-20deg);
    transform:rotate(-20deg);
    font-size:200px;
    color:#CCC;
    font-weight:bold;
    letter-spacing:40px;
    position:absolute; 
    z-index:1000; 
    top:20%;
    left:15%;   
    opacity:0.5; 
    filter:alpha(opacity=50);
}

/* HTML */
<div id="VoidBox" style="display:none;">VOID</div>

---

希望这对其他人有用。

使用jyore的解决方案，我修改了CSS和HTML，如下所示

/* CSS */
#VoidBox {
    -webkit-transform:rotate(-20deg);
    -moz-transform:rotate(-20deg);
    -o-transform:rotate(-20deg);
    transform:rotate(-20deg);
    font-size:200px;
    color:#CCC;
    font-weight:bold;
    letter-spacing:40px;
    position:absolute; 
    z-index:1000; 
    top:20%;
    left:15%;   
    opacity:0.5; 
    filter:alpha(opacity=50);
}

/* HTML */
<div id="VoidBox" style="display:none;">VOID</div>

---

希望这对其他人有用。

在覆盖在发票内容上的

上设置该样式。确保图像在没有文本的地方具有透明度。如果用div环绕图像，则只需通过按钮显示/隐藏div即可在

display:none和
显示：块在覆盖在发票内容上的
上设置该样式。确保图像在没有文本的地方具有透明度。如果用div环绕图像，则只需通过按钮显示/隐藏div即可在
display:none和
显示：块JavaScript用于在OP所指的按钮上应用“水印”。JavaScript用于在OP所指的按钮上应用“水印”。谢谢。这正是我需要的。除了使用void图像，比如CSS，还有其他选择吗。不确定是否有办法使用CSS将文本旋转45度。不管怎样，感谢这里发布的所有内容。您可以使用transform属性。不确定是否所有浏览器都支持它，但大多数新浏览器都应该支持。请查看网站和网站谢谢。这正是我需要的。除了使用void图像，比如CSS，还有其他选择吗。不确定是否有办法使用CSS将文本旋转45度。不管怎样，感谢这里发布的所有内容。您可以使用transform属性。不确定是否所有浏览器都支持它，但大多数新浏览器都应该支持。查看网站，网站很高兴您能正常工作。您还可以为某些IE支持添加
-ms transform
属性。。。我相信。很高兴你能成功。您还可以为某些IE支持添加
-ms transform
属性。。。我相信。