在css中,有没有什么有效的方法可以使字体看起来像橡皮图章?就好像橡皮图章上的墨水涂在印刷品上?
更好的方法是将相同的效果应用于边框,就好像边框是橡皮图章的一部分。这样地:
最佳答案
这与您正在寻找的内容很接近—它使用一个覆盖伪元素和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>