1. Set the text transparency style on the picture
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.bg{
--bg: url('333.jpg')no-repeat center/cover;
background: var(--bg);
width: 800px;
height: 400px;
}
.zdycs{
width: 100%;
height: 100%;
background: rgb(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
font-size: 5vw;
/* 文字阴影 方法一*/
/* text-shadow: 2px 2px 0 #fff,
-2px 2px 0 #fff,
2px -2px 0 #fff,
-2px -2px 0 #fff; */
/* 文字阴影 方法二 */
text-stroke: 2px #fff;
-webkit-text-stroke: 2px #fff;
background: var(--bg);
background-clip: h2;
-webkit-background-clip: h2;
/* 设置透明色 */
color: transparent;
}
</style>
<body>
<div class="bg">
<h2 class="zdycs">大家好才是真的好</h2>
</div>
</body>
</html>
