Question

好吧......我想不出办法做到这一点。似乎没有什么工作。我有一个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没有高度...所以你看不到背景。如何缩放背景的高度以与宽度成比例？

我怎样才能使这个响应？那么整个shabang只是按宽度缩放？

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

谢谢！

Answer 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以使其全宽。

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

1 个答案: