效果图
鼠标移动到文字
html
<div>帅哥</div>
css
*{
margin: 0;
padding: 0;
}
/* 改变背景 */
div:hover{
background-position:center center;
}
div{
position:absolute;
left: calc( 50% - 250px);
top:calc( 50% - 100px);
height: 200px;
line-height: 100px;
font-size: 100px;
font-weight: bold;
width: 500px;
background-image:url(./1.jpg) ;
/* 反切背景图片 */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color:transparent;
text-fill-color:transparent;
background-position:0 0;
transition: all .6s;
}
图片