HTML/CSS 裁剪图片

Question

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

www.theanimedatabase.com

标志在右上角！

Answer 1

看这张图片：

正如大家所说，裁剪图片是最好的解决方案。

Answer 2

如果您右键单击您的徽标并单击 "Inspect Element"，您将能够看到您的图像区域实际上是 200px x 200px。

尝试剪掉徽标底部的额外高度（以及顶部的额外高度我猜你的顶部也有额外的高度，因为你将 header img margin-top 设置为-68px 将您的徽标向上推），以便您的徽标的总高度为 70 像素。这将与您的 header.

匹配

接下来，在您的 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 3

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

overflow: hidden

注意这会隐藏部分图像，因此如果您在 Anime Database 下有东西，它会被隐藏。

Answer 4

header {
    overflow: hidden;
}