减少html中的锚点区域

在我目前的网站上，我有一个横幅图像，在这里我缩小了底部边距，以便下面的内容在页面上移动一点点。横幅上还有一个锚标记，以链接到“主页”页面。减少html中的锚点区域

但是，锚点的击中面积并未相应减少。由于负填充无效，并且我的谷歌搜索没有任何结果，所以我在此寻求建议。

有没有办法减少锚标签的命中区域？

相关CSS：

可以这样做

.logo { 
    margin-bottom: -26px; 
}

来源

2017-03-18 Runar

我不明白这是什么问题？这是图像大小 –

是的，这是图像大小。但是，按下（Home，Portfolio，About）按钮不起作用。至少应该在命中区域之间进行一些分离。 – Runar

一种方法是已经将图像从链路分离，只是有链接/单击区域作为图像顶部的叠加层，以便您可以独立于可点击区域来控制尺寸定位图像。例如...

HTML：

<div class="image"> 
    <img src="logo.svg"> 
    <a href="/"></a> 
</div>

CSS：

.image{ position: relative; margin-bottom: -26px; } 
.image a{ position: absolute; display: block; width: 100%; height: calc(100% - 26px); }

或者，你可以用Z-索引打球，但我想既然标志确实这种方法可能是最干净在设计/截图中与酒吧重叠。

来源

2017-03-18 20:37:19 rynomite

这个效果很好，除了导航栏部分不可点击。可能是由于z索引。我试图用各种z索引修复它，但没有运气。 – Runar

你可以尝试添加'pointer-events：none'作为图像的css属性 – rynomite

UPDATE

锯关于在图像的链接具体问题。据此编辑。对于链接，请添加position:relative和z-index:1或更高。而不是使用负边距，请使用bottom属性将链接向上移动。我添加了title属性来证明所有链接都已暴露，只需将鼠标悬停在链接上即可看到不同的标题。

沟这一空白元素（即 <img>），然后让 <a> nchor inline-block与 background-image

代码片段

header { 
 
    height: 50px; 
 
} 
 

 
.logo { 
 
    width: 50px; 
 
    height: 100%; 
 
    background: url(http://imgh.us/gir_zim.gif)no-repeat; 
 
    background-size: contain; 
 
    display: inline-block; 
 
} 
 

 
nav { 
 
    position: relative; 
 
    z-index: 1; 
 
    bottom: 15px; 
 
}

<header class='site-title'> 
 
    <a class="logo" href="#/" title='logo'></a> 
 
    <nav><a href='#/' title='link1'>LINK1</a>&nbsp;<a href='#/' title='lin2k'>LINK2</a></nav> 
 
</header>

来源

2017-03-18 20:50:04 zer00ne

减少html中的锚点区域

回答

相关问题