不使用背景圖像的水印
[英]Watermarks without using background-image
問題描述
我需要使用包含水印圖像作為背景圖像的selectpdf web api將html代碼轉換為pdf。 但問題是它不是用pdf打印背景圖像。
有沒有其他方法我可以添加水印效果而不使用背景圖像。 請注意，水印需要重復x和y以填充頁面。 水印只是一個30dg的文字。 會優先html / css第一個最糟糕的情況可以試試javascript。
謝謝
3 個解決方案
解決方案1
0 2019-04-29 02:02:21
你可以使用絕對定位。
body { margin: 0; } img { max-width: 100%; } .wrapper { position: relative; } .watermark { position: absolute; color: #fff; opacity: 0.6; } .watermark.wm1 { top: 15px; left: 15px; } .watermark.wm2 { top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } .watermark.wm3 { bottom: 15px; right: 15px; } .watermark.wm4 { top: 15px; right: 15px; } .watermark.wm5 { bottom: 15px; left: 15px; }
<div class="wrapper"> <img src="https://cdn.pixabay.com/photo/2017/10/25/16/54/african-lion-2888519_1280.jpg" /> <div class="watermark wm1">WATERMARK!</div> <div class="watermark wm2">WATERMARK!</div> <div class="watermark wm3">WATERMARK!</div> <div class="watermark wm4">WATERMARK!</div> <div class="watermark wm5">WATERMARK!</div> </div>
如果這不能為您剪切，您可以始終使用將水印與圖像合並的js lib，以使其更安全。 一個很棒的圖書館是watermark.js
解決方案2
0 2019-04-29 09:00:33
嘗試這個
.watermark{ font-size:75px; position: absolute; margin: auto; top:0px; transform:rotate(-45deg); color:#ccc; top:50%; transform-origin:bottom bottom; z-index:-999; }
<html> <head> <title>Watermark</title> </head> <body> <span class='watermark'>WATERMARK</span> <h1>Hello World</h1> <p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World</p> </body> </html>
解決方案3
0 2019-04-29 09:12:49
檢查這個..！ 願這可以幫到你
.watermark{ font-size:75px; position: absolute; margin: auto; top:0px; transform:rotate(-45deg); color:#ccc; top:50%; transform-origin:bottom bottom; z-index: 1000; color: #ccc4c4c7; margin-top: 60px; } img { height: 500px; }
<html> <head> <title>Watermark</title> </head> <body> <span class='watermark'>WATERMARK</span> <img src="https://images3.alphacoders.com/853/thumb-1920-85305.jpg"> </body> </html>
使用JavaScript的背景圖片有問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.