HTML/CSS 以 45 度角重复文本，在元素外部不可见

Question

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

像这样的事情：

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

Answer 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;
}