2

请看看这个小提琴

如何使背景图片可点击？当点击“参加调查”时，将进入一个新页面。

<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 都是首选。

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

4

5 回答 5

4

你不应该。

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

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

演示

于 2012-01-10T22:23:12.467 回答
1

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

http://jsfiddle.net/RZWCS/

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

于 2012-01-10T22:24:11.433 回答
1

在这里查看更多信息：http ://bluedogwebservices.com/css-trick-turning-a-background-image-into-a-clickable-link/

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

编辑

html

<div class="wrapper">
<a href="/"><img src="yoursrc" alt="description"/></a>
<p>Some other text regularly positioned.</p>
<div>

CSS：

.wrapper
{
position:relative;
width:500px;
height:500px;
}

.wrapper a
{
position:absolute;
top:0px;
right:0px;
}
于 2012-01-10T22:19:01.793 回答
0

只是把 div 变成一个<a>元素？

<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/>
于 2012-01-10T22:29:21.340 回答
0

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

如果有人有办法做到这一点，我会很感兴趣:)

于 2012-01-10T22:21:51.857 回答