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

前言

  • 该问题是我写完项目之后,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 标签,这样工作量也很大;综上两个原因,我把此方案放在了下下策。
相关推荐
r0ad6 分钟前
从痛点到解决方案:为什么我开发了Chrome元素截图插件
前端·chrome
OEC小胖胖14 分钟前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
jingling55526 分钟前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route27 分钟前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒29 分钟前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏1 小时前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@1 小时前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通1 小时前
微服务项目->在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
excel1 小时前
Vue3 响应式系统核心执行器:Reactive Effect 与依赖调度机制
前端
南玖i3 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js