javascript - Watermark Effect On Top OF Div Element - Stack Overflow

admin管理员组

文章数量:1391850

Not sure if its possible but no harm asking.

I have a page which shows an invoice. There is an option to void the invoice via a button. What I want is to do create a watermark effect across the page but it has to be on top of the page content.

I tried using image and CSS background on the invoice container DIV element but that will be hidden if by the invoice content itself. Below is the CSS styles I am using for the class

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

If anyone has any solution, either CSS or Javascript, ... it will be appreciated. Thanks again.

Not sure if its possible but no harm asking.

I have a page which shows an invoice. There is an option to void the invoice via a button. What I want is to do create a watermark effect across the page but it has to be on top of the page content.

I tried using image and CSS background on the invoice container DIV element but that will be hidden if by the invoice content itself. Below is the CSS styles I am using for the class

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

If anyone has any solution, either CSS or Javascript, ... it will be appreciated. Thanks again.

• javascript
• css
• watermark

Share Improve this question Follow asked Dec 8, 2011 at 1:48 asyadiqinasyadiqin 1,67733 gold badges1919 silver badges2525 bronze badges 2

• Set that style on a <div> overlayed on the invoice content. Make sure the image has transparency where there is no text. – Matt Ball Commented Dec 8, 2011 at 1:55
• If you surround it with a div you can then just show/hide your div via your button to toggle back and forth between display: none; and display: block; – Dallas Commented Dec 8, 2011 at 2:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Simple 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;
}

Then when the button is pressed, do some simple JS

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

Using jyore's solution, I modified the CSS and HTML as shown below

/* 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>

Now I have the watermark effect over my invoice page without using any image file. Using JQuery, I displayed the DIV when an invoice is voided.

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

Hope this is useful for someone else.

Here is my method for doing this. Basically you need to layer two divs on top of each other within a container.

My solution uses an invoice div with a content div and a void message div inside. hide the void message div unless the container has a 'void' class. It is then a simple matter to toggle the void class on the container using javascript.

My made a jsfiddle with ments to demonstrate: http://jsfiddle/trafnar/etFmC/1/

本文标签： javascriptWatermark Effect On Top OF Div ElementStack Overflow