html中img标签直接使用border-radius时会图片进行了遮挡

KjPrime2025-04-01 10:22

前言

该问题是我写完项目之后，UI走查发现的问题，虽然我也发现了问题，但是改起来，不好改，就耽搁了。后面UI还是要求要改。
一直找不到解决方案，歪打正着通过MDN官网偶然看到的clip-path属性。

需求

一个图标，悬浮之后是一个圆圈。

理想效果图：

原代码
解决方案就是使用clip-path属性，对img标签进行裁剪。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>只用一个img标签实现悬浮</title>
    <style>
      .image {
        width: 100px;
        height: 100px;
        cursor: pointer;
        padding: 20px;
        clip-path: circle(50%);
      }
      .image:hover {
        background-color: beige;
      }
    </style>
  </head>
  <body>
    <!-- 内容区域 -->
    <img 
      class="image" 
      src="https://cn.vitejs.dev/logo.svg" 
      alt="图标" 
    />
  </body>
</html>

最开始效果

就是边上的因为border-radius，导致遮挡了。
原代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>只用一个img标签实现悬浮</title>
    <style>
      .image {
        width: 100px;
        height: 100px;
        cursor: pointer;
        padding: 20px;
      }
      .image:hover {
        background-color: beige;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <!-- 内容区域 -->
    <img 
      class="image" 
      src="https://cn.vitejs.dev/logo.svg" 
      alt="图标" 
    />
  </body>
</html>

总结

clip-path属性可以对标签进行裁剪，不会影响里面的内容布局；
使用 clip-path是解决方案的一种，其实也可以通过div标签包裹住img 即可；一是因为多了一个标签，多一个还不如少一个，二是因为我有多个这个情况，不可能每个都写一个 div 标签，这样工作量也很大；综上两个原因，我把此方案放在了下下策。