html - 仅在标题内制作图片可点击的 css/html

Question

我正在开发一个响应式网站，但遇到了一个烦人的问题。在我的标题中是一些文字。我用 text-indent -9999px 将它设置在屏幕外。之后我加载背景图像。但我只希望背景图片可以点击。我不知道该怎么做。我在谷歌上找到了一些例子。但是他们从不使用css“注入(inject)”图片。他们总是在 html 中定义图片。

所以我想要的只是一个在标题中水平居中的图片，只有图片是可点击的，而不是它周围的边距。

<header>
<a href="alink">
<h1>this is gonna be replaced with an image(on desktop websites). It will stay here on mobile website</h1></a>
</header>

和CSS:

header h1 {
margin:10px 0 30px 0;
text-indent:-9999px;
background-image: url('pika.png');
background-repeat: no-repeat;
background-size: contain;
background-position:50% 50%;
width:100%;
height:220px;
border:1px solid red;
float: left;
}

我还将代码上传到 jsfiddle: http://jsfiddle.net/Cm3yQ/

可以看到，目前整个h1都是可以点击的，我只希望图片可以点击。

Answer 1

<edit>

只有图像可点击的可能性是:

1. 使用img + map + area
2. 或使用 SVG .一个随机教程:http://tutorials.jenkov.com/svg/a-element.html可以做什么的平均示例: DEMO

</edit>

---

你应该把链接放在h1里面, 并给它一个 display:block .

header {
  background:url(http://lorempixel.com/400/150);
  /* background could either be on h1 or a */
  background-size:cover;/* optionnal */
}
header, h1 , h1 a  {/* size them all at once */
  display:block;
  height:300px;
}
a {
  text-indent:-9999px;/* hide text from screen */
  /* still not working ? set background here or give it a color 
  almost transparent so it can catch click event : 
  background:rgba(0,0,0,0.001);*/
}

和 HTML :

<header>
  <h1>
    <a href="#"> SOME text </a>
  </h1>
</header>