在css中,有没有什么有效的方法可以使字体看起来像橡皮图章?就好像橡皮图章上的墨水涂在印刷品上?
更好的方法是将相同的效果应用于边框,就好像边框是橡皮图章的一部分。这样地:
css - CSS效果以“橡胶图章”效果呈现字体-LMLPHP

最佳答案

这与您正在寻找的内容很接近—它使用一个覆盖伪元素和mix-blend-mode来创建真正的橡皮戳外观。除了橡皮图章纹理本身之外,所有操作都是在css中完成的。
截图:
css - CSS效果以“橡胶图章”效果呈现字体-LMLPHP
实时演示(现在也可以在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>

09-16 13:49