如何使背景图片可点击（javascript或css） [英] How to make background images clickable (javascript or 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;> 
 
默认情况下，background-image属性在水平和垂直方向上重复图像。 
 
< / div> 
  

JavaScript或CSS都是首选。

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

解决方案

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

  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 =http://jsfiddle.net/MSBBg/1/ =nofollow>演示

Please take a look this fiddle

How to make the background image clickable? When click "Take the survey" will go to a new page.

<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 or CSS are all preferred.

Edit: I don't want to use image float to right corner.

解决方案

You shouldn't.

What if a user has styles turned off, or is using a screen reader? They should be able to take the survey as well.

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

Demo

这篇关于如何使背景图片可点击（javascript或css）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！