使用 CSS 的 HTML 网站中的图像超越图像的 href答案

【问题标题】：href For Image Goes Beyond Image In HTML website with CSS使用 CSS 的 HTML 网站中的图像超越图像的 href
【发布时间】：2022-01-25 14:46:21
【问题描述】：

我正在制作一个 html 网站并尝试制作该网站，因此当您单击图像时，它会将您带到另一个网站。这是我在 index.html 中的代码

 <a href="https://www.youtube.com/">
     <div class="metFinLogo"></div>   
 </a>

在css中

.metFinLogo{
    background-image: url('./images/metFinLogoImg.png');
    background-size:contain;
    width: 250px;
    height:200px;
    margin: 5%;
    background-repeat: no-repeat;
}

当我打开 index.html 时，即使在图像之外，仍然可以选择图像。我需要帮助才能做到这一点，以便仅单击有图像的位置才能发送到链接。

【问题讨论】：

这是因为你并没有真正使用图像 (<img>);您将图像用作<div> 上的背景图像文件。由于您的链接/锚点 (<a>) 覆盖了 <div>，因此无论图像在哪里结束，整个 div 都是可点击的。
听起来你想改用<a><img /></a>

标签： html css image background-image

【解决方案1】：

<div> 标签是块级元素。如果您将display: inline-block 添加到 .metFinLogo，它将起作用

.metFinLogo{
    background-image: url('./images/metFinLogoImg.png');
    background-size:contain;
    width: 250px;
    height:200px;
    margin: 5%;
    background-repeat: no-repeat;
    display: inline-block;
}

【讨论】：

【解决方案2】：

inline-block 它的格式就像 inline 元素一样，它不会从新行开始。但是，您可以设置宽度和高度值。

.metFinLogo{
display:inline-block;
}

.metFinLogo{
    background-image: url('https://static.remove.bg/remove-bg-web/6cc620ebfb5922c21227f533a09d892abd65defa/assets/start_remove-c851bdf8d3127a24e2d137a55b1b427378cd17385b01aec6e59d5d4b5f39d2ec.png');
    background-size:contain;
    width: 250px;
    height:200px;
    margin: 5%;
    background-repeat: no-repeat;
    display: inline-block;
}

 <a href="https://www.youtube.com/">
     <div class="metFinLogo"></div>   
 </a>

【讨论】：