html文字镂空（图片上的文字镂空）
今天看到一个设计图，客户需求是，里面文字是可变的……如图
查了半天度娘，墙都翻了，没找到类似案例；算了，自己搞
利用属性：
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
再根据背景偏移来搞一下，结果，真成了；不知道有没有其他牛逼plus的方法，就将就用一下；
DOCTYPE html>
<html style="font-size:50px;">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="format-detection" content="telephone=no" />
<title>title>
<style>
*{margin:0;padding:0;font-family: "微软雅黑";}
style>
head>
<body>
<div class="demo" data-color="09b6f2">
<img src="https://vncdn.mobi88.cn/suchen/suchen.jpg" alt="" />
<div><span style="background:url(https://vncdn.mobi88.cn/suchen/suchen.jpg) no-repeat;">苏尘span>div>
div>
<style>
.demo{
width:5rem; /*外层大小*/
height:5rem; /*外层大小*/
text-align:center;
position:relative;}
.demo img{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;}
.demo div{
background:rgba(255,255,255,1);
width:2rem;
height:2rem;
text-align:center;
line-height:2rem;
font-size:0.8rem;
font-weight:bold;
position:absolute;
z-index:6;
left:0.5rem; /*记住这个距离*/
top:0.5rem; /*记住这个距离*/
border-radius:1rem;}
.demo span{
display:block;
width:100%;
height:100%;
display:block;
position:absolute;
z-index:5;
background-position:-0.5rem -0.5rem !important; /*等于负父元素偏移距离*/
background-size:5rem 5rem !important; /*等于最外层大小*/
-webkit-background-clip:text !important;
-webkit-text-fill-color:transparent !important;}
style>
body>
html>
技术有限，先这样玩，希望有帮助