0

我有一个 2000*300px 的图像，打算用作页脚。中间有四个部分，每个部分都需要可点击——它们应该是链接。我现在正在使用图像映射。

我在网站底部有一个页脚。它的宽度为 100%，高度为 300px。我需要做的是将图像居中放在 div 的中间，隐藏任何溢出。它必须保持可点击 - 这就是为什么我不能只调整图像大小。

所以！

  • 如何在页脚 div 中将元素居中并隐藏溢出？
  • 或者，如何动态调整页脚图像的大小但仍然可以点击？
  • 或者，我怎样才能实现相同的效果 - 一个带有可点击部分作为页脚的连续出现的图像？
4

2 回答 2

2

如果允许图像在侧面被切断是可以的，那么您可以通过在 CSS 中将图像位置设置为居中来使图像居中。

.footer {background: transparent url(path/to/image) no-repeat bottom center;}

要获得其他可点击元素，只需在页脚 div 中嵌套新的 div 或段落或链接。

它看起来像这样。

<div class="footer">
    <a>Clickable Content</a>
    <a>Clickable Content</a>
    <a>Clickable Content</a>
    <a>Clickable Content</a>
</div>

然后你可以为每一个设置高度和宽度。然后设置链接。或者使用 div 并在其中设置链接。

.footer a {height: 300px; width: 25%;}
于 2012-08-25T05:23:53.390 回答
1

你可以试试这个：

CSS 代码

    .footer {background: transparent url(path/to/image) no-repeat bottom center;}

代码

    <div class="footer">
        <a>Clickable Content</a>
        <a>Clickable Content</a>
        <a>Clickable Content</a>
        <a>Clickable Content</a>
    </div>

也可以使用这个：

    .footer a {height: 300px; width: 25%;}
于 2012-08-25T05:56:52.937 回答