如何用另一个覆盖图像/文本

Question

我是CSS和HTML的新手，但是我创建了一个网站，需要用另一个网站覆盖文本或图片。我在Photoshop中做了我真正需要的示例：

Answer 1

基于CSS阴影的解决方案：

h1 {
  font-family: cursive;
  text-shadow: -10px -10px 0px rgba(150, 150, 150, 1);
}

<h1>Lorem Ipsum<h1>

https://css3gen.com/text-shadow/之类的在线工具可以帮助您构建正确的text-shadow属性

Answer 2

该代码是自解释性的，但是，如果有任何问题请发表评论。

文本

使用text-shadow较不灵活，例如，重复的文本将始终位于实际文本的后面，如果要反转该文本，则必须将阴影对齐为实际文本，将阴影对齐为实际文本很有弹性，而且不是动态的。

p {
  margin: 2rem;
  border:1px solid red;
  padding:10px;
  display:inline-block;
}

p:hover {
  text-shadow: -5px -5px red;
}

<p>Lorem</p>

使用高度灵活的伪元素，可以将文本放置在任何地方，缺点是必须以attribute或CSS variable的形式提供文本

p {
  margin: 2rem;
  padding: 10px;
  display: inline-block;
  position: relative;
  font-size:1.3em;
}

p:before {
  color: red;
  position: absolute;
  top: 40%;
  left: 40%;
  width:100%;
}

p:nth-child(1):hover:before {
  content: attr(data-text);
}

p:nth-child(2):hover:before {
  content: var(--data-text);
}

<p data-text="attribute">attribute</p>
<p style="--data-text:'CSS variables';">CSS variables</p>

---

图片：

[box] {
  width: 300px;
  height: 300px;
  background: url(https://picsum.photos/300);
  position: relative;
}

[box]:hover:before {
  content: '';
  background: inherit;
  width: 100%;
  height: 100%;
  top: 25%;
  left: 25%;
  position: absolute;
}

<div box></div>

Answer 3

尝试：

.cover{
  font-family: 'Bradley Hand', cursive;
  text-shadow: -10px -10px 0px rgba(150, 150, 150, 1);
}
<div class="cover">my covered texte</div>