背景图片，3个透明png按钮，三个链接，响应式。可能的？答案

【问题标题】：backtground image, 3 transparent png buttons, three links, and responsive. possible?背景图片，3个透明png按钮，三个链接，响应式。可能的？
【发布时间】：2014-05-02 19:30:33
【问题描述】：

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

我的策略是将大图像设置为 div 的背景。然后浮动：将三个 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/

谢谢！

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案1】：

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

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

HTML：

<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;
}

PS：

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

【讨论】：