gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 23:40:53 25 4
gpt4 key购买 nike

我正在开发一个响应式网站,但遇到了一个烦人的问题。在我的标题中是一些文字。我用 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>

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

  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>

关于html - 仅在标题内制作图片可点击的 css/html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22913568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com