【每日技巧】多彩文字背景及遮罩注意点：遮罩选用的图片必须为黑白相间。如：关于mask的用法可以参考这里。

纯CSS实现多彩文字效果

1、background-clip实现透明文字

HTML：

<div class="clipped-title">
      <h1>闪灵</h1>
</div>

CSS：

.clipped-title h1 {
    font-size: 200px;
    text-align: center;
    -webkit-transition: text-shadow 1s ease;
    text-shadow: 0 0 1px rgba(0,0,0,.1);
    border: 14px solid transparent;
    margin: 0;
    padding: 0;
    background: url(../images/shanling.png) no-repeat center center,
    linear-gradient(270deg,#fff,#fff),
    url(../images/shanling.png) no-repeat center center;
    background-origin: border-box;
    background-size: cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text,content-box,border-box;
}

2、遮罩实现半透明文字效果

HTML：

<div class="masked-image">
      <h1>MASK-IMAGE</h1>
</div>

CSS：

.masked-image h1{
    margin: 30px;
    font-size: 100px;
    color: #fff;
    text-transform: uppercase;
    border: 14px solid #fff;
    border-radius: .2em;
    text-align: center;
    display: block;
    mask-image: url(../images/rough-texture.png);
}

注意点：遮罩选用的图片必须为黑白相间。如：

关于mask的用法可以参考这里。