html如何实现一个带纹理的字体呢?


摘要:
下文讲述html实现一个带纹理背景的字体的方法分享,如下所示:

实现思路:
    使用伪类after为字体添加一个带纹理的背景,如下所示:

例:

 <style>
html,
body {
    background: #001c3f;
    width: 100%;
    height: 100%;
    margin: 0px;
    border: 0; 
}
.container::after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABxJREFUeNpi+P//PwMIA8FNJgYkwAgSgXEAAgwA8BoHsEna1aoAAAAASUVORK5CYII=);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0 0;
    background-color: rgba(0, 0, 0, 0);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
.container {
    border: 0;
    padding: 0;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}
</style>
<div class="container">
    <div style="font-size:5em;color:white;text-align:center;margin-top:50px">猫猫教程--maomao365.com</div>
</div>
html实现带纹理的字体的示例分享

html实现带纹理的字体的示例分享