如果标题没有很好地解释它,我很抱歉,但这是我能想到的最好的标题来代表我的问题。
所以我有两个 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 时看起来就像您正在单击一样。
最佳答案
网页上的所有元素本质上都是 block - 因此尽管您可以创建圆形或菱形等外观,但它实际上仍然是一个四边形 block 元素。
对于您的问题,您可以考虑使用图像映射:
http://www.w3.org/TR/html401/struct/objects.html
或者可能使用 HTML5 CANVAS 方法:
关于css - 精确点击重叠的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15687897/