CSS背景图片无法水平重复问题求助及代码排查

问题详情 #

我想让.surface元素的背景图片水平重复，但效果没出来。页面代码如下：

CSS代码 #

body {
  margin: 0;
  background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
  overflow: hidden;
}

.night {
  height: 80vh;
  width: 70vw;
  border: 1px solid black;
  margin: 5rem auto;
  background: url(http://placekitten.com/5/5);
  background-size: cover;
  position: relative;
  box-shadow: 1px 2px 60px rgba(0, 0, 0, 0.4);
  overflow-x: hidden;
}

.surface {
  height: 140px;
  width: 200px;
  background: url(http://placekitten.com/10/10);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-repeat: repeat-x;
  /*animation: moveRight 6s linear infinite;*/
}

.car {
  position: absolute;
  bottom: 8%;
}

HTML代码 #

<div class="night">
  <div class="surface"></div>
  <div class="car">
    <img src="http://placekitten.com/100/75" alt="Car">
  </div>
</div>

当前效果 #

期望效果 #

查了资料没找到语法问题，请问问题出在哪？

问题原因及修复方案 #

问题核心是**.surface的宽度太小**：你设置了width: 200px，这个宽度下背景图片的重复效果被压缩得几乎看不见，甚至因为元素宽度和背景图尺寸的比例关系，视觉上完全没体现出重复。

修复方法：

• 第一步：把.surface的宽度改成100%，让它铺满父容器.night的宽度，给背景重复留出足够空间：

.surface {
  height: 140px;
  width: 100%; /* 替换原200px */
  background: url(http://placekitten.com/10/10);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-repeat: repeat-x;
  /*animation: moveRight 6s linear infinite;*/
}

• 第二步（可选）：如果想让重复效果更明显，可以给背景图设置固定尺寸，比如：

.surface {
  /* 其他样式不变 */
  background-size: 60px auto; /* 自定义背景图大小，让重复图案更清晰 */
}

修改后就能看到背景图片水平重复的效果了。

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