Question

我正在开发一个快速响应的网站，我遇到了一个恼人的问题。在我的标题是一些文字。我用text-indent -9999px将它设置在屏幕外。之后我加载了一张背景图片。但我只希望背景图片可以点击。我不知道该怎么做。我在谷歌上发现了一些例子。但他们从来没有用css“注入”一张照片。他们总是在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

它可能看起来像一个评论，但我没有足够的声誉来发表评论，因此我把它作为答案。

为什么不在html中创建另一个div并将图像放入其中，然后相应地设置它。

Answer 2

HTML

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

的CSS

.headerDiv{
 border:1px solid red;
 height:220px;
 width:100%;    
}

header h1 {
 margin:10px 0 30px 0;
 text-indent:-9999px;
 background-image:      url('http://img3.wikia.nocookie.net/__cb20120630141813/sims/images/d/d7/Pichu.gif');
 background-repeat: no-repeat;
 background-size: contain;
 background-position:center; 

 height:220px;
 // float: left;    Get Rid of float: left
}

Answer 3

<edit>

只有图像可嵌入的可能性是：

使用img + map + area
或使用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>

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

3 个答案: