HTML/CSS 在元素外不可见的 45 度角重复文本答案

【问题标题】：HTML/CSS Have repeating text at a 45 degree angle that isn't visible outside the elementHTML/CSS 在元素外不可见的 45 度角重复文本
【发布时间】：2023-03-21 23:27:01
【问题描述】：

我试图以非常低的透明度以 45 度角向下重复一个单词或短语，并让它被元素的边缘切断。只是想知道这是否可能不只是在另一个程序中制作图像。

类似这样的：

如果有人能帮我解决这个问题，我们将不胜感激。

【问题讨论】：

标签： html css text

【解决方案1】：

您可以使用 SVG 创建旋转的文本，然后将其应用为背景。您可以通过调整background-size值轻松控制大小

html {
  min-height:100%;
  background: 
    url('data:image/svg+xml;utf8,<svg style="transform:rotate(45deg)" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Lorem </text></svg>') 
    0 0/50px 50px; /* update the 50px 50px to control the size */
}

考虑将伪元素置于所有内容之上：

body:before {
  content:"";
  position:absolute;
  inset:0;
  opacity:0.8;
  background: 
    url('data:image/svg+xml;utf8,<svg style="transform:rotate(45deg)" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Epuuc </text></svg>') 
    0 0/60px 60px;
}

body {
  position:relative;
  background:purple;
  min-height:200vh;
}

【讨论】：