CSS实现文本的纹理叠加效果实例页面

回到相关文章 »

效果：

CSS纹理叠加

设置文字渐变起止颜色：

起始色：终止色：

选择纹理原图：

自己本地上传

代码：

CSS代码：

.pattern-overlay {
    font-size: 60px;
    font-family: 'microsoft yahei';
    background-image: url(./pattern01.jpg); 
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.pattern-overlay > span {
    position: absolute;
    background-image: linear-gradient(to bottom, #f00, #f00);
    mix-blend-mode: overlay;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.pattern-overlay > span::before {
    content: attr(data-text);    
}

HTML代码：

<h2 class="pattern-overlay">
    <span data-text="CSS纹理叠加"></span>
    CSS纹理叠加
</h2>