CSS字体样式 – 橡皮图章效果

2023年3月19日 410次阅读

我正在寻找一种尽可能接近橡皮图章的CSS字体.

例如,接近这个：

《CSS字体样式 – 橡皮图章效果》

我不喜欢使用图像,因为文本是动态的.

我有人可以提供一些如何做到这一点的建议,我将不胜感激.

UPDATE

这个问题似乎与this重复

最佳答案 不是真正的字体,但它只会加载一个小图像,可以使用任何次数您想要生成类似的文本.

* {
  box-sizing: border-box;
}

h1 {
  position: relative;
  display: inline-block;
  color: red;
  padding: 15px;
  background-color: white;
  box-shadow:inset 0px 0px 0px 10px red;
}

h1:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://i.imgur.com/5O74VI6.jpg");
  mix-blend-mode: lighten;
}
<h1>
CANCELLED
</h1>
点赞