HTML / CSS裁剪图像

Question

所以我的网站上有一个徽标，问题是当你将鼠标悬停在它下面或周围时，你仍然可以点击它。我希望它只能在它上面点击一次。

www.theanimedatabase.com

徽标位于右上角！

Answer 1

如果右键单击徽标并单击“检查元素”，您将能够看到图像区域实际为200px x 200px。

尝试在底部裁剪你的徽标额外高度（顶部的额外高度我猜你在顶部还有额外的高度，因为你将头部img margin-top设置为-68px以向上推动你的徽标）这样你的徽标总高度就是70px。哪个会与您的标题匹配。

接下来，在你的css中更改它：

header img {
    margin-top: -68px;
    float: left;
    width: 200px;
    height: 200px;
    float: left auto;
}

为：

 header img {
    float: left;
    width: 200px;
    height: 70px;
    float: left auto;
}

Answer 2

看看这张图片：

正如大家所说，裁剪图像是最佳解决方案。

Answer 3

最佳解决方案是适当裁剪图像，但您可以通过将此css规则添加到图像中来解决此问题：

overflow: hidden

请注意，这会隐藏部分图片，因此如果您在Anime Database下有某些内容，则会隐藏该内容。

Answer 4

header {
    overflow: hidden;
}