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';

Answer 2

使用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>

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

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

希望这对其他人有用。

Answer 3

这是我执行此操作的方法。基本上你需要在一个容器中将两个div叠加在一起。

我的解决方案使用带有内容div和内部空格消息div的发票div。隐藏void消息div，除非容器有'void'类。然后，使用javascript在容器上切换void类是一件简单的事情。

我做了一个带有评论的jsfiddle来演示：http://jsfiddle.net/trafnar/etFmC/1/

Div元素顶部的水印效果

3 个答案: