css 实现一个功能 背景图的宽度跟随文字内容变化

要实现背景图片宽度随文字内容变化的功能，可以使用CSS中的`background-size`属性和`min-width`或`max-width`属性结合使用。下面是一个简单的示例：

.container {
  position: relative; /* 如果容器不是块级元素，需要设置定位 */
  overflow: hidden; /* 隐藏溢出的内容 */
}

.container p {
  line-height: 1.5; /* 设置合适的行高，让背景图随着文本高度变化 */
  padding: 0 20px; /* 添加边距以便显示背景图片 */
  background-image: url('your-image-url.jpg'); /* 替换为你的图片URL */
  background-position: center;
  background-repeat: no-repeat;
  min-width: 100%; /* 宽度不会小于内容的最小宽度 */
  max-width: calc(100% + 40px); /* 可调整边缘空间，例如这里加了额外的20px边距和20px空白区域 */
}

/* 当内容过长时，超出部分隐藏 */
.container p:after {
  content: '';
  display: block;
  width: -webkit-scrollbar-width; /* 获取滚动条宽度 */
  height: 100%;
  overflow-y: auto; /* 触发滚动条 */
}

在这个例子中，`.container`的背景图片会随着其内文本内容的变化而自动调整宽度。当文字超过最大宽度时，会出现滚动条。