使用 “rubber stamp” 效果呈现字体的 CSS 效果

Question

在 CSS 中是否有任何有效的方法来呈现具有使其看起来像橡皮图章效果的字体？就像橡皮图章上的墨水覆盖在打印 Material 上一样？

更好的方法是将相同的效果应用于边框，就好像边框是橡皮图章的一部分一样。像这样:

Answer 1

这与您正在寻找的很接近 - 它使用叠加伪元素和 mix-blend-mode 来创建真正的橡皮图章外观。除了橡皮图章纹理本身，一切都在 CSS 中完成。

截图:

现场演示(现在也适用于 Firefox):

* {
  box-sizing: border-box;
}

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

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>
Example Text
</h1>