水印效果在Div元素的顶部

Watermark Effect On Top OF Div Element

本文关键字：元素 顶部 Div      更新时间：2023-09-26

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

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

我尝试在发票容器DIV元素上使用图像和CSS背景，但这将被隐藏，如果由发票内容本身。下面是我为

类使用的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;
}

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

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

使用joore的解决方案，我修改了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>

现在我在发票页面上有水印效果，而不使用任何图像文件。使用JQuery，我在发票无效时显示DIV。

/* JQuery */
$("#VoidBox").show();

这是我的方法。基本上，你需要在一个容器中堆叠两个div。

我的解决方案使用一个invoicediv，里面有一个contentdiv和一个void messagediv。隐藏void消息div，除非容器有'void'类。然后使用javascript在容器上切换void类就很简单了。

我用注释做了一个jsfiddle来演示:http://jsfiddle.net/trafnar/etFmC/1/

相关文章：