前言
- 该问题是我写完项目之后，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标签，这样工作量也很大；综上两个原因，我把此方案放在了下下策。