Ger*_*it0 21
这与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>设置你的容器的大小和使用绝对定位，而浮动文本转化与旋转文本。
#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>注意：对于重复文本，我建议使用JavaScript或jQuery。
- 可以选择水印文本，您可能需要使用指针事件来解决： (3认同)
我现在正在使用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设置背景：
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>