css设置文字跟随背景的宽高而变化大小

CSS中可以使用`background-size`属性来控制背景图片的大小，并通过配合`:before`或`:after`伪元素和`content`属性，将文字与背景图一起设置。当设置`background-size`为`cover`或`contain`时，文字会随着背景图的宽度和高度自动调整其大小，使其既能填满整个容器，又能保持字间距和排版相对清晰。

例如，如果你想要一个标题文本完全覆盖一个背景图片，你可以这样做：

.parent-class {
  position: relative;
}

.parent-class::before {
  content: attr(data-text); /* 使用"data-text"这样的数据属性存放你要显示的文字 */
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: transparent; /* 透明颜色让文字与背景融合 */
}

.parent-class {
  background-image: url('your-background-image.jpg');
  background-size: cover; /* 或者 background-size: contain */
}

这样，无论背景图片的尺寸如何变化，文字都会随之相应地缩放。