给HTML页面的文字添加动态背景-一只薛眠羊

前言

我们知道盒子或方形容器里面可以通过 background-image: url(…);设置背景图片，而文字的设置背景图却甚少，其实文字也可以像盒子里放背景图的，接下来就由小薛来给大家带来详细的教程。

1.写一个div标签

里面写文字。

<div class="ceshi">
     给字体添加背景图片。
</div>

2.写css

.ceshi{
       height: 100px;
       width: 710px;
      line-height: 100px;
      font-size: 40px;
      font-weight: 1000;
      color: rgba(78, 75, 75,.1);
      background-image: url(2.jpg);
      background-size: 28% 140%;
      -webkit-background-clip: text;
      text-transform:uppercase;
}

*url里写入自己的图片地址
*最后两行
-webkit-background-clip: text;
text-transform:uppercase;
是实现效果重点，其它都是是背景图或字体的样式。

3.注意

如果没效果，是因为它在有些浏览器是不兼容的。

完整代码展示

<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="UTF-8" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <meta name="viewport" content="width=device-width,nitial-scale=1.0" /> 
        <title> 给文字添加动态背景 </title> 
        <style>
            .text{ 
                width:1000px; 
                font-size:70px; 
                font-weight:900; 
                background:url("图片链接"); 
                background-clip:text; 
                -webkit-background-clip:text; 
                color:transparent; 
                animation:dynamic 5s infinite alternate linear; 
            } 
            @keyframes dynamic{ 
                0%{background-position:50%;} 
                100%{background-position:100%;} 
            } 
        </style> 
    </head> 
    <body> 
        <div class="text"> 
            <center>
                <h1>Hello Word !</h1>
            </center> 
        </div>  
    </body>
</html>

相关声明 1 微信公众号：薛眠羊科技
2 本站永久网址：https://www.xuemy.cn
3 本文内容仅为技术科普，请勿用于非法用途
4 本文内容未隐讳任何个人、群体、公司。非文学作品，请勿用于阅读理解的练习
5 根据《计算机软件保护条例》第十七条，本站所有软件请仅用于学习研究用途
6 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责

THE END