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

请看看这个

如何使背景图像可点击？单击“进行调查”将进入新页面

<div style="height:300px;width:300px;border-style:solid;border-width:5px;background-image:url('http://cdn.survey.io/embed/1.0/right_top_blue.png'); background-repeat:no-repeat;background-position:right top;">

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

</div>

默认情况下，“背景图像”属性在水平和垂直方向上重复图像。

Javascript或CSS都是首选

---

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

查看此处了解更多信息：

另外，您可以将div设置为相对的，然后只需将用锚点包裹的图像放置在右上角即可

编辑

Html

---

我可能错了，但我不认为CSS背景可以绑定事件。我个人会用一个透明的div来覆盖它，或者使用一个真实的图像来访问DOM元素的事件

如果有人能做到这一点，我会很感兴趣：）

你不应该

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

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;}

---

这是一个使用相对位置+绝对位置的简单示例

---

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

只需将div转换为

元素

<a href="mysite.com" 
    style="display: block; 
    height:300px; 
    width:300px;
    border: 5px solid;
    background: url('http://cdn.survey.io/embed/1.0/right_top_blue.png') right top no-repeat;">
<a/>

为什么要使用该图像作为背景？如果在元素中换行一个正则表达式会更符合逻辑。如果你不想使用float，则不需要使用float。请给出一个不使用float的示例。你不能将句柄注册到背景图像。你必须这样做：@sophia看一下我下面的答案。请你给出一个关于“你可以使div相对，然后用锚包裹图像并将其绝对放置在右上角”的真实小提琴示例，这很聪明，但有点像黑客。当然，它是有效的：）。

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;}

<a href="mysite.com" 
    style="display: block; 
    height:300px; 
    width:300px;
    border: 5px solid;
    background: url('http://cdn.survey.io/embed/1.0/right_top_blue.png') right top no-repeat;">
<a/>