0

我需要在浏览器窗口底部固定一个曲线形的可拉伸页脚，其中曲线是图像。我模拟了一个活生生的例子。

为了通过页脚图像的透明部分最大限度地减少较低层中“可点击”房地产的损失，我的直觉是将图像切割成几个部分（示例中的红色框）并将它们彼此相邻放置，如下所示：

#arc-segment-1,
#arc-segment-2 {
   position: fixed;
   z-index: 2;
   bottom: 0px;
}
#arc-segment-1 {
   width: 5%; /* where this */
   height: 82px;
   left: 0;
   background-image: url(...);
}
#arc-segment-2 {
   width: 5%;
   height: 72px;
   left: 5%; /* matches this */
   background-image: url(...);
}

在大多数主流浏览器（不是 IE 和 FF）中，随着窗口大小的调整，细线断裂在框之间来来去去，这是不可接受的。

浮动图像片段可以解决问题，但我还没有找到一种实现方法，仍然将页脚固定到底部并保留提到的“可点击性”。有没有比我更好的方法来解决这个问题，或者可以以某种方式补救？

关于给出的示例的注意事项：示例中的曲线图像本身尚未被剪切，它仍然是单个图像。此外，蓝色框不是问题，它们不会拉伸，因此不会受到问题的影响。

我会对这种行为的原因和任何可行的解决方案感兴趣。谢谢。

4

2 回答 2

0

你可以添加所以你可以点击下面pointer-events: none;

于 2012-06-11T17:46:19.890 回答
0

在 W3C 阅读时，我自己偶然发现了一个可行的解决方案：

如果取出段的宽度属性并给出左右属性，例如屏幕中间的 10% 宽的段：

#arc-segment-3 {
   left: 45%;
   right: 45%;
}

尽管现在某些浏览器似乎用细线重叠了这些段，但它的行为将与最初预期的一样。就我而言，这是一个小得多的问题，因为弧线的纹理很弱，不太明显。任何有像素完美方法的人？

于 2012-06-13T00:51:53.717 回答