html+css实现文字镂空效果并显示背景图片

以下是基于 HTML 和 CSS 的完整代码实现，具体实现了文字镂空效果，并在文字区域显示背景图片，外层区域覆盖一层半透明遮罩以突出文字内容。

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字镂空效果</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="mask">
    <span>文字镂空效果</span>
  </div>
</body>
</html>

CSS 样式

/* 去除默认边距并设置背景图片 */
body {
  margin: 0;
  height: 100vh;
  background: url('./img.jpeg') no-repeat center/cover; /* 全屏背景 */
}

/* 半透明遮罩容器 */
.mask {
  height: 100%;
  display: flex; /* 启用 Flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
}

/* 镂空文字效果 */
.mask span {
  font-size: 24vh; /* 根据视窗高度动态调整文字大小 */
  font-weight: bold; /* 文字加粗以提升视觉效果 */
  color: transparent; /* 文字颜色透明 */
  -webkit-text-stroke: 1px #fff; /* 添加白色描边 */
  background: url('./img.jpeg') no-repeat center/cover; /* 文字内部背景图 */
  -webkit-background-clip: text; /* 背景裁剪到文字 */
  background-clip: text; /* 兼容性属性 */
}

效果说明

背景图片：
- 页面背景通过 body 的 background 属性设置，背景图充满整个视口，采用居中显示且覆盖布局。
遮罩层：
- .mask 设置半透明黑色背景，提升文字的可见性和对比度。
镂空文字：
- 核心属性：
  - color: transparent：将文字颜色设置为透明，确保文字内容本身不显示。
  - background-clip: text：将背景裁剪到文字区域，仅在文字区域显示背景图。
  - -webkit-text-stroke：通过白色描边增强文字轮廓，增加与背景的区分度。
- 字体大小 font-size 使用视口单位（vh），使其能根据屏幕高度动态调整，适配不同设备。