添加背景图片
background-image: url(图片路径)
设置背景大小
background-size: 400px 500px
取消平铺背景
background-repeat: no-repeat
背景定位
background-position
背景切割
-webkit-background-clip: text (效果:将背景填充到text中)
字体透明
color: transparent
改变鼠标样式
cursor: pointer
取消平铺背景 background-repeat: no-repeat
没使用: 使用后:
背景切割 -webkit-background-clip: text (效果:将背景填充到text中)
注:使用的时候要将字体设置为透明 color: transparent
效果展示:
定制神里绫人字体 :将背景图片切割到text中,用伪类选择题改变背景图片的位置形成动态字体
<!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, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 400px;
height: 500px;
background-color: pink;
background-image: url(image/2.png); /* 添加背景图片 */
background-size: 400px 500px; /* 设置大小 */
/* background-repeat: no-repeat; */ /* 取消平铺背景 */
background-position:200px 200px ; /* 背景定位 */
/* 改变文字 */
font-size: 90px;
font-family: 楷体;
font-weight: bold;
color: transparent;
-webkit-background-clip: text; /* 背景切割 */
/* 设置文本 */
text-align: center;
line-height: 700px;
cursor: pointer; /* 改变鼠标的样式 */
}
.box:hover{
transition: all 10s;
background-position: 800px 900px;
}
</style>
</head>
<body>
<div class="box">
神里绫人
</div>
</body>
</html>
效果展示:
动态字体