Realize the effect:
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
--bg: url(img/1.jpg) no-repeat center/cover;
background:var(--bg);
height: 100vh;
font-family: 'Open Sans', sans-serif;
}
.modal{
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
}
.modal h1{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 12vw;
text-stroke: 1px #fff;
-webkit-text-stroke: 1px #FFFFFF#fff;
background: var(--bg);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="modal">
<h1>老李</h1>
</div>
</body>
</html>