透明图像的不可点击和空白区域

Question

我在网站的右上角使用了一个带有透明区域的功能区图像，如下所示：

http://bloomwebdesign.net//wp-content/uploads/2010/11/Corner-Ribbon-Banner-005.jpg

HTML：

<a href="http://www.domain.com"> <img src="/triangle.png" class="ribbon"></a>

样式表：

position: fixed;
top: 0px;
right: 0px;
z-index: 1200;
width: 200px;

当我将光标移动到图像的透明区域时，它会显示指针以打开链接，但有没有办法让透明区域变空并且不可点击？

Answer 1

如果它是您想要点击的图像的正方形/矩形部分，则可以创建单独的<a href="">标记，并使用CSS在可点击区域上定位和调整大小。

如果它不是方形/矩形（从您的问题看起来似乎是三角形）那么我可能会使用 客户端图像映射 ，因为您可以使用可点击的区域你喜欢什么形状。在线有几种免费工具可用于创建图像映射。尝试：

• http://www.maschek.hu/imagemap/imgmap
• http://mappatool.com/
• http://www.image-maps.com/

Answer 2

使用CSS 3旋转并使用水平图像。旋转时，浏览器会确保只能单击图像。

-o-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
transform: rotate(40deg);

这里解释的好例子http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/我从这个问题45 Degree Angle + Box Shadow - Using nothing but CSS

得到了