水印文本对角重复 css/html答案

【问题标题】：Watermark text repeated diagonally css/html水印文本对角重复 css/html
【发布时间】：2021-01-06 12:07:36
【问题描述】：

如何用css/html实现以下水印文字（“howbloggerz”）？

【问题讨论】：

我不相信这可以仅使用 HTML/CSS 来完成，因为它需要修改实际图像（否则查看者可以保存没有水印的图像）。服务器端的解决方案是否可行？
实际图片不需要修改。在这种情况下，允许观看者保存不带水印的内容:)
这正是我需要明确显示编辑副本而不是官方副本所需要的。

【解决方案1】：

这与 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>

【讨论】：

谢谢，这可能更容易:)
Array.from() 和 String.prototype.repeat() 是在同一个 ECMAScript 2015 标准（ES6 或 ECMA-262）中引入的，所以我很好奇为什么要犹豫使用一个而不是另一个？否则，很棒的答案。
@PatrickRoberts，好问题！这是我的疏忽。我已经习惯了Array.from polyfill，以至于我完全忘记了支持本质上是相同的。我已将帖子更新为使用String.prototype.repeat。
效果很好。尽管我不得不避免使用任何 JavaScript，因为 OP 要求使用 CSS/HTML。这就是为什么我添加了使用JavaScript 或jQuery 的建议。

【解决方案2】：

我现在使用 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>");
}

&lt;body style="width:100%;height:100%"&gt;&lt;/body&gt;

设置背景的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>

【讨论】：

【解决方案3】：

设置容器的大小并使用绝对定位浮动文本，而 transforming 使用旋转的文本。

#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。

【讨论】：

可以选择您的水印文本，您可能需要使用指针事件来修复它：无；
你也可以用 user-select: none; 修复它
请记住，user-select 仍然是一个工作草案，大多数浏览器都需要供应商前缀或不同的名称才能使用。

【解决方案4】：

如果只是在图像上放置一个文本，这里有另一个可能的 css 选项，drop-shadow 和一个伪（text-shadow 也可以）

.watermarked:after {/* draw the watermark at screen*/
  color: rgba(0, 0, 0, 0.4);
  content: 'watermarked watermarked watermarked';
  word-spacing: 3em;
  transform: rotate(-60deg);
  filter: 
  drop-shadow(2em 3em  #000) 
  drop-shadow(4em 6em  #000) 
  drop-shadow(8em 12em #000) 
  drop-shadow(-15em -24em #000)
  ;
}

/* makeup */
.watermarked {
  width: max-content;
  border: solid;
  display: grid;
  overflow: hidden;
}

img,
.watermarked:after {
  grid-row: 1;
  grid-column: 1;
  margin: auto;
}

<div class="watermarked" data-watermark="howbloggerz">
  <img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>

【讨论】：

【解决方案5】：

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>

水印位置应该是固定的，并且应该用 & 高度显示成为您的屏幕尺寸。然后水印将打印在你的整个报告什么的。

【讨论】：

【解决方案6】：

     Array.from(document.querySelectorAll('.watermarked')).forEach(function(el) {
        el.dataset.watermark = (el.dataset.watermark + ' ').repeat(300);
    });

.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.75;
    line-height: 4em;
    letter-spacing: 2px;
    color: #cccccc;
}

<html>
<head>
<title>
Form and Watermarks
</title>
</head>
<body>

<h1>Form Demo</h1>
<form method="post">
    First Name: <input name="first" type="text" /><br>
    Last name: <input name="last" type="text" />
    <br />
    <input name="Submit" type="submit" value="submit" />
</form>

<div class='watermarked' data-watermark='watermark..' ></div>

</body>
</html>

效果很好，但不适用于 html 表单。表单元素被禁用。看看这个。

【讨论】：

这个问题也发生在超链接等...我通过添加指针事件解决了这个问题：无；