文字镂空效果
<html>
<body>
<div>
<p>
文字镂空效果
</p>
</div>
</body>
</html>
HTML
p{
-webkit-text-stroke: 2px purple;
/* 文字轮廓线条属性 */
color:transparent;
background-color: red;
font-size: 100px;
background: center center / 100% auto no-repeat
url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1113%2F051R0115229%2F20051Q15229-11-1200.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643683288&t=7e653cbb454e9422435f323b2ce69740');
-webkit-background-clip: text;
/* 背景应用目标为文字 */
}
CSS样式
效果图