0

如果标题解释得不够好，我很抱歉，但这是我能想到的最好的标题来代表我的问题。

所以我有两个div：

.div-arrow
{
    position: absolute;
    float: left;
    cursor: pointer;
    display:block;
    width: 136px;
    height: 54px;
    vertical-align: middle;
    border-radius: 4px;
    background: url(ImagePathHere) no-repeat scroll 0px 0px transparent;
    zoom: 50%;
}

.div-diamond
{
    position: absolute;
    float: left;
    cursor: pointer;
    display: block;
    width: 83px;
    height: 54px;
    vertical-align: middle;
    border-radius: 4px;
    background: url(ImagePathHere) no-repeat scroll -272px 0px transparent;
    zoom: 50%;
}

我用它们来制作这样的布局：http: //i.stack.imgur.com/htFRd.png

单击红色标记所在的位置将激活绿色菱形，而不是看起来像您单击的菱形。我想知道如何修剪图像/ div 的那些看不见的部分，以便您实际单击看起来像在单击的 div。

4

1 回答 1

2

网页上的所有元素本质上都是块 - 所以尽管您可以创建圆形或菱形等外观，但它实际上仍然是一个四面块元素。

对于您的问题，您可以考虑使用图像映射：

http://www.w3.org/TR/html401/struct/objects.html

或者可能使用 HTML5 CANVAS 方法：

https://developer.mozilla.org/en-US/docs/HTML/Canvas

于 2013-03-28T17:09:49.860 回答