HTML中实现透明文字+半透明背景效果（不可替换img标签）

当前代码中图片出现拉伸变形的原因是仅设置了width:100%，未限制图片的宽高比。要达成目标效果，只需对img标签的样式进行调整，核心是使用object-fit属性保持图片比例，同时让图片铺满视口：

修改后的完整代码 #

CSS 样式

body {
  margin: 0;
  overflow: hidden; /* 可选，防止图片超出视口时出现滚动条 */
}
img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键：保持图片宽高比，裁剪超出部分以铺满容器 */
}
div {
  position: absolute;
  width: 300px;
  height: 100px;
  left: 100px;
  top: 100px;
  background-color: #ff08;
  text-align: center;
  font-size: 60px;
  line-height: 100px;
  font-family: arial;
  border-radius: 10px;
}

HTML 结构

<img src="https://cdn.pixabay.com/photo/2022/11/27/08/39/mountain-7619151_960_720.jpg">
<div>TEXT</div>

关键修改说明 #

• object-fit: cover：这是实现图片比例不变的核心属性，它会让图片保持原始宽高比，自动裁剪超出容器的部分，确保图片完全覆盖视口且不会拉伸变形。
• top: 0; left: 0; right: 0; bottom: 0：让图片占满整个视口，替代仅设置width:100%的方式，保证图片在垂直方向也铺满屏幕。
• 可选的body { overflow: hidden; }：防止图片因裁剪逻辑出现微小的滚动条，提升视觉体验。

内容的提问来源于stack exchange，提问作者Piuksu