CSS问题：如何让赞助商板块背景图不超出灰色容器？

当前代码中背景图溢出灰色容器的原因有两个：一是背景图尺寸远大于承载它的<a>标签，二是浮动元素导致.sponsors容器高度计算异常。按以下方式修改代码即可解决：

修改步骤 #

1. 给.sponsors容器添加overflow: hidden，既可以裁剪容器内超出的内容，又能修复浮动元素导致的容器高度坍塌问题。
2. 给每个带背景图的<a>标签添加background-size属性，让背景图适配标签尺寸，可选两种配置：
   • background-size: cover：保持图片比例，填满整个<a>标签区域（可能裁剪图片边缘）
   • background-size: contain：保持图片比例，完整显示图片（标签内可能留空白）

修改后的完整代码 #

CSS代码 #

.sponsors {
  width: 999px;
  display: inline-block;
  clear: both;
  border: 1px solid whitesmoke;
  padding: 50px;
  margin: 15px auto;
  text-transform: uppercase;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: #999;
  overflow: hidden; /* 新增：裁剪溢出内容 + 修复高度坍塌 */
}

.sponsors span {
  display: block;
  float: left;
  height: 20px;
  line-height: 10px;
}

.sponsors a {
  display: block;
  float: left;
  height: 96px;
  width: 11%;
  padding: 0 10px;
}

a.one {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
  background-size: cover; /* 新增：适配标签尺寸 */
}

a.two {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
  background-size: cover;
}

a.three {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
  background-size: cover;
}

a.four {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
  background-size: cover;
}

a.five {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
  background-size: cover;
}

a.six {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
  background-size: cover;
}

a.seven {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
  background-size: cover;
}

HTML代码（无需修改） #

<div class="sponsors">
    <span>Sponsors:</span>

    <a class="one" href=""></a>
    <a class="two" href=""></a>
    <a class="three" href=""></a>
    <a class="four" href=""></a>
    <a class="five" href=""></a>
    <a class="six" href=""></a>
    <a class="seven" href=""></a>
</div>

修改后，背景图会被限制在灰色容器内部，不会出现溢出情况。

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