背景图像，3个透明PNG按钮，三个链接，响应式.可能

Question

好吧...我想不出一种方法来做到这一点。似乎没有任何效果。我有一个 770x250 的图像。和三个 174x34 透明按钮图像 png。770x250 图像应具有三个可点击的链接区域：前三分之一、中间第三和最后三分之一。

我的策略是将大图像设置为div的背景。然后 float：将三个 png 放在它上面，并带有适当的边距，以将其正确放置在背景图像上。然后将包含图像的每个元素的宽度设为 33%。

像这样：

<div class="topimage">
  <ul>
    <li><img style="float:left;" src="buttons3.png" /></li>
    <li><img style="float:left;" src="buttons3.png" /></li>
    <li><img style="float:left;" src="buttons3.png" /></li>
  </ul>
</div>

.CSS：

.topimage{
   background: url(background) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;"
}
li{
  width: 33%;
  float:left;
  list-style: none;
}
ul{
  margin-top: 200px;
}

但是，您会注意到顶部div 没有高度...所以你看不到背景。如何缩放背景的高度以与宽度成比例？

我怎样才能使它响应起来？让整个沙邦随宽度缩放？

小提琴：http://jsfiddle.net/7rFV3/1/

谢谢！

Answer 1

一种方法是在容器中制作它：

小提琴：http://jsfiddle.net/7rFV3/2/

网页 ：

<div class="container">
    <div class="topimage">
        <ul>
        <li><img src="http://placekitten.com/174/34" /></li>
        <li><img src="http://placekitten.com/174/34" /></li>
        <li><img src="http://placekitten.com/174/34" /></li>
        </ul>
    </div>
</div>
<div>
    other div
</div>

.CSS

.container{
    display:flex;
}
.topimage{
       background: url(http://placekitten.com/770/250) no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    float:left;
}

附言 ：

您可以添加 width:100%;到.topimage以使其全宽。