Водяной знак в PDF с использованием css или Rotativa (генератор PDF)

Я использую rotativa для создания PDF в MVC.

Я хочу водяной знак на всех страницах PDF, но, к сожалению, у меня этого не получается.

Я также исследовал ротативу, но не могу найти подходящего решения для этого. И затем я попробовал это с помощью CSS.

я пробовал это

CSS

   #background {
            position: absolute;
            display: block;
            min-width: 100%;
            opacity: 0.5;
            text-align: center;
            background-color: transparent;
            padding-top:50%;
        }
        #bg-text {
            color: lightgrey;
            font-size: 120px;
            transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            opacity: 0.9;
            filter: alpha(opacity=50);
            background-color: transparent;
        }

HTML

 <div id="background">
            <p id="bg-text">Draft</p>
        </div>

Он отлично работает для первой страницы PDF. И я хочу это на всех страницах PDF. Пожалуйста, предложите мне правильное решение этой проблемы с водяным знаком.

Любое решение будет заметно с использованием CSS или с помощью rotativa.


css asp.net-mvc watermark rotativa
person Manoj    schedule 24.10.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я решил свою проблему, следуя

HTML

<div class="watermark" style="background: url('../Images/watermark.png');"></div>

CSS

 .watermark {
            height: 95%;
            width: 90%;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-repeat: repeat-y;
            z-index: 9999;
            opacity: 0.2;
        }
person Manoj    schedule 27.10.2015

arrow_upward
0
arrow_downward

html

<div class="watermark" style="font-family: Calibri; border-left: 1px solid lightgrey; border-right: 

        <style type="text/css">
            .watermark {
                background-image: url("../../Resources/Watermark/Draft5.png");
                background-repeat: repeat-y;
                top: 0;
                left: 0;
                z-index: 100000;
            }
        </style>

Имейте в виду, что поместите тег под элементом body, иначе он не будет работать, когда вы используете rotativa.

person Nilay Mistry    schedule 27.06.2017