如何使背景图像可点击（javascript或css）

请看看这个小提琴

如何使背景图像可点击？ 点击“参加调查”将转到新页面。

 By default, the background-image property repeats an image both horizontally and vertically.  

Javascript或CSS都是首选。

编辑：我不想使用图像浮动到右上角。

Answer 1

你不应该。

如果用户关闭了样式或正在使用屏幕阅读器，该怎么办？ 他们也应该能够参加调查。

 div{position:relative;} a {display:block; width:120px; height:120px; position:absolute; top:0; right:0; text-indent:-9999px; background-image:url('http://cdn.survey.io/embed/1.0/right_top_blue.png'); background-repeat:no-repeat;background-position:right top;} 

演示

Answer 2

这是一个使用position relative + absolute的简单示例

http://jsfiddle.net/RZWCS/

您还可以考虑绝对定位链接并将该图像用作链接背景（链接的文本可能与图像上显示的相同，并使用负文本缩进或类似技术移到外面）

Answer 3

点击此处查看更多信息： http ： //bluedogwebservices.com/css-trick-turning-a-background-image-into-a-clickable-link/

此外，您可以使div相对，然后只需将图像用锚包裹并将其绝对放在右上角。

编辑

HTML

 
  
Some other text regularly positioned.
 
 

CSS：

 .wrapper { position:relative; width:500px; height:500px; } .wrapper a { position:absolute; top:0px; right:0px; } 

Answer 4

我可能在这里错了，但我不认为CSS背景可以有绑定到它们的事件。 我个人会用透明的div来覆盖它，或者使用真实的图像来挖掘DOM元素的事件。

如果有人有办法这样做我会感兴趣:)

Answer 5

只需将div转换为元素？