我正在开发一个响应式网站,但遇到了一个烦人的问题。在我的标题中是一些文字。我用 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都是可以点击的,我只希望图片可以点击。
最佳答案
<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>
关于html - 仅在标题内制作图片可点击的 css/html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22913568/