水印文本对角重复css/html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40853308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Watermark text repeated diagonally css/html
提问by Captain Obvious
How can I achieve the following watermark text ("howbloggerz") with css/html?
如何使用 css/html 实现以下水印文本（“howbloggerz”）？
回答by Gerrit0
This is pretty similar to Daerik's answer, but I wanted to avoid using an extra element, and automate the watermark text generation.
这与 Daerik 的答案非常相似，但我想避免使用额外的元素，并自动生成水印文本。
Array.from(document.querySelectorAll('.watermarked')).forEach(function(el) {
el.dataset.watermark = (el.dataset.watermark + ' ').repeat(300);
});.watermarked {
position: relative;
overflow: hidden;
}
.watermarked img {
width: 100%;
}
.watermarked::before {
position: absolute;
top: -75%;
left: -75%;
display: block;
width: 150%;
height: 150%;
transform: rotate(-45deg);
content: attr(data-watermark);
opacity: 0.7;
line-height: 3em;
letter-spacing: 2px;
color: #fff;
}<div class="watermarked" data-watermark="howbloggerz">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>回答by Daerik
Set the size of your container and float your text using absolute positioning while transformingyour text with rotate.
设置容器的大小并使用绝对定位浮动文本，同时使用旋转转换文本。
#watermark {
height: 450px;
width: 600px;
position: relative;
overflow: hidden;
}
#watermark img {
max-width: 100%;
}
#watermark p {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 18px;
pointer-events: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}<div id="watermark">
<img src="http://www.topchinatravel.com/pic/city/dalian/attraction/people-square-1.jpg">
<p>This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark.</p>
</div>Note:For repeating text, I would suggest using either JavaScript or jQuery.
注意：对于重复文本，我建议使用 JavaScript 或 jQuery。
回答by estani
I'm now using svg as a background image. Plain CSS:
我现在使用 svg 作为背景图片。普通CSS：
body {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgb(245,45,45)' font-size='20'>watermark</text></svg>");
}<body style="width:100%;height:100%"></body>Javascript to set the background:
用于设置背景的 Javascript：
function watermark(text) {
var body = document.getElementsByTagName('body')[0];
var bg = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'>" +
"<text transform='translate(20, 100) rotate(-45)' fill='rgb(245,45,45)' font-size='20' >" + text + "</text></svg>\")";
body.style.backgroundImage = bg
}
//for this test
var input = document.getElementById('a');
watermark(input.value);
input.addEventListener('input', function(evt) {
watermark(this.value);
});<body style="width:100%;height:100%">
<input id="a" value="change me" />
</body>回答by Hashan
CSS:-
.watermarked::before {
position: fixed;
top: -75%;
left: -75%;
display: block;
width: 300%;
height: 300%;
transform: rotate(-45deg);
content: attr(data-watermark);
font-size: 30px;
opacity: 0.15;
line-height: 4em;
letter-spacing: 2px;
color: #ff0523;
z-index:-1;
}
HTML:-
<div class="watermarked" data-watermark="Watermark.."></div>
SCRIPT:-
<script>
Array.from(document.querySelectorAll('.watermarked')).forEach(function(el) {
el.dataset.watermark = (el.dataset.watermark + ' ').repeat(10000);
});
</script>
watermark position should be as fixed and display with & height should be your screen size. Then watermark will be printed in your whole report or something.
水印位置应该是固定的，显示高度应该是你的屏幕尺寸。然后水印将打印在您的整个报告中。
