网站建设明薇通网络服务好东莞快速优化排名
前言
- 该问题是我写完项目之后，UI走查发现的问题，虽然我也发现了问题，但是改起来，不好改，就耽搁了。后面UI还是要求要改。
- 一直找不到解决方案，歪打正着通过MDN官网偶然看到的
clip-path属性。
需求
- 一个图标，悬浮之后是一个圆圈。
理想效果图：
- 原代码
- 解决方案就是使用
clip-path属性，对img标签进行裁剪。
<!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，导致遮挡了。
-
原代码
<!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标签，这样工作量也很大；综上两个原因，我把此方案放在了下下策。