当前位置： 首页 > news >正文

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

news 来源：原创 2025/7/1 19:47:24

前言

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

相关文章：

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

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

编程日记 2025/7/1 19:47:24

【Keepalived】Keepalived-2.3.3明确结束对CentOS 7的支持

2025年3月30日&#xff0c;官方发布了Keepalived的最新版&#xff0c;版本号&#xff1a;2.3.3 而2024年11月3日发布的2.3.2版本&#xff0c;在CentOS 7.9上编译的时候&#xff0c;就出现了报错&#xff0c;但是在Alma Linux 8.10上&#xff0c;则可以成功编译安装&#xff0c…...

编程日记 2025/7/1 19:36:10

Docker学习--容器生命周期管理相关命令--docker pause/unpause 命令

docker pause 命令的作用&#xff1a; 用于暂停一个或多个容器中的所有进程。 语法&#xff1a; docker pause CONTAINER [CONTAINER…]&#xff08;要操作的容器的名称&#xff0c;可以同时操作多个&#xff09;。 实例&#xff1a; ①暂停一个容器及其所有进程&#xff1a;…...

编程日记 2025/7/1 16:27:53

【Zabbix技术系列文章】第④篇——Zabbix 数据可视化

在当今数字化运维时代&#xff0c;面对海量的监控数据&#xff0c;如何从中快速获取有价值的信息至关重要。Zabbix 的数据可视化功能为我们提供了直观、高效的解决方案&#xff0c;它能将复杂的监控数据转化为清晰易懂的图表和仪表盘&#xff0c;助力运维人员迅速发现问题、分析…...

编程日记 2025/6/28 4:46:23

R CSV 文件处理指南

R CSV 文件处理指南 引言 CSV&#xff08;逗号分隔值&#xff09;文件是一种常见的文件格式&#xff0c;它以纯文本形式存储表格数据。在R语言中&#xff0c;CSV文件处理是非常基础且重要的技能。本文将详细介绍如何在R中读取、处理和导出CSV文件&#xff0c;并探讨一些高级技…...

编程日记 2025/7/1 19:39:31

在Git仓库的Readme上增加目录页

一般在编写Readme时想要增加像文章那样的目录&#xff0c;方便快速跳转&#xff0c;但是Markdown语法并没有提供这样的方法&#xff0c;但是可以通过超链接结合锚点的方式来实现&#xff0c;如下图是我之前一个项目里写的Readme&#xff1a; 例如有下面几个Readme内容&#xff…...

编程日记 2025/6/28 1:31:35

[特殊字符]《多商户家政系统技术解析：SpringBoot+MyBatisPlus+UniApp高效实战指南》

&#x1f6e0;️ 引言&#xff1a;多商户家政系统的技术挑战与价值 在数字化时代&#xff0c;家政行业逐渐向线上迁移&#xff0c;从传统的线下预约转向平台化管理。多商户家政系统具备复杂的角色体系&#xff0c;包括&#xff1a; &#x1f6ce;️ 商户端&#xff1a;管理订单…...

编程日记 2025/7/1 4:20:05

请求Header（Request Headers）详解

请求Header&#xff08;Request Headers&#xff09;详解 HTTP请求Header是HTTP请求消息的重要组成部分&#xff0c;用于在客户端和服务器之间传递附加信息。这些信息帮助服务器理解客户端的环境、偏好和请求的具体内容&#xff0c;从而能够返回更合适的响应。以下是对请求Hea…...

编程日记 2025/7/1 19:37:07

深度求索：开源革命下的AI普惠之路

引言&#xff1a;AI领域的破局者 2025年&#xff0c;全球AI领域因一家中国公司的崛起而震动。杭州深度求索&#xff08;DeepSeek&#xff09;推出的V3大模型以6710亿参数、14.8万亿token训练数据量&#xff0c;在数学竞赛、代码生成等专业领域超越多数国际竞品&#xff0c;其每…...

编程日记 2025/6/29 18:08:11

XSS 攻击（详细）

目录 引言 一、XSS 攻击简介 二、XSS 攻击类型 1.反射型 XSS 2.存储型 XSS 3.基于 DOM 的 XSS 4.Self - XSS 三、XSS 攻击技巧 1.基本变形 2.事件处理程序 3.JS 伪协议 4.编码绕过 5.绕过长度限制 6.使用标签 四、XSS 攻击工具与平台 1.XSS 攻击平台 2.BEEF 五…...

编程日记 2025/6/28 4:12:31

使用Redis实现轻量级消息队列

使用消息中间件如RabbitMQ或kafka虽然好&#xff0c;但也给服务器带来很大的内存开销&#xff0c;当系统的业务量&#xff0c;并发量不高时&#xff0c;考虑到服务器和维护成本&#xff0c;可考虑使用Redis实现一个轻量级的消息队列&#xff0c;实现事件监听的效果。下面介绍下…...

编程日记 2025/6/28 5:55:43

13届省赛python A组：10.数的拆分

题目1 数的拆分 给定 T 个正整数 ai&#xff0c;分别问每个 ai 能否表示为 x 1 y 1 ⋅ x 2 y 2 x1^{y1}⋅x2^{y2} x1y1⋅x2y2 的形式&#xff0c;其中 x1,x2 为正整数&#xff0c;y1,y2 为大于等于 2 的正整数。 输入格式 输入第一行包含一个整数 T 表示询问次数。 接下来…...

编程日记 2025/7/1 19:44:10

【Android Studio】下载安装过程（详细）

目录 一、前期准备 JDK下载安装 二、下载安装 下载 安装 启动 一、前期准备 JDK下载安装 详细的安装过程请移步我的另一篇博客jdk17详细安装步骤_jdk17安装教程详细-CSDN博客 cmd打开命令行&#xff0c;输入java -version验证&#xff0c;可以看到此处我安装的是java23。…...

编程日记 2025/6/28 4:05:56

【RAGFlow】ubuntu22部署ragflow（v0.17.2）

按照官方手册部署&#xff1a; https://ragflow.io/docs/v0.17.2/ 部署环境&#xff1a; CPU: 4核memory&#xff1a; 16gGPU: T4(vGPU)Disk: 20g 1. 配置国内docker-ce源 https://mirrors.tuna.tsinghua.edu.cn/help/docker-ce/ 用清华源&#xff0c;要不然下载速度感人 …...

编程日记 2025/6/28 2:59:32

Easysearch 如何短暂维护 Data 节点

之前介绍过如何移除 Data 节点&#xff0c;那么如果只是短暂停止一个 Data 节点进行维护&#xff0c;之后再次加入集群&#xff0c;是否也需要按照移除节点的步骤进行操作呢&#xff1f;我们先梳理下核心原理。 核心原理 我们先看看节点离开集群之后集群是怎样处理的。当节点…...

编程日记 2025/6/28 6:30:28

【cocos creator 3.x】3Dui创建，模型遮挡ui效果

官方文档&#xff1a;https://docs.cocos.com/creator/3.8/manual/zh/ui-system/components/editor/ui-model.html 1、3Dui创建 创建label&#xff0c;默认会添加canvas根节点和2dCamera 将Camera删除&#xff0c;canvas上组建去除cc.Canvas&#xff0c;cc.widget&#xff0…...

编程日记 2025/7/1 4:14:57

UE5学习笔记 FPS游戏制作32 主菜单，暂停游戏，显示鼠标指针

文章目录 一主菜单搭建UI显示主菜单时&#xff0c;暂停游戏&#xff0c;显示鼠标绑定按钮 二 打开主菜单 一主菜单 搭建UI 添加一个MainUi的控件 添加一个返回游戏的按钮和一个退出游戏的按钮 修改一下样式&#xff0c;放中间 显示主菜单时&#xff0c;暂停游戏&#xff0…...

编程日记 2025/6/29 7:20:53

有哪些开源的视频生成模型

1. 阿里巴巴通义万相2.1&#xff08;WanX 2.1&#xff09; 技术架构&#xff1a;基于Diffusion Transformer&#xff08;DiT&#xff09;架构&#xff0c;结合自研的高效变分自编码器&#xff08;VAE&#xff09;和Flow Matching训练方案&#xff0c;支持时空上下文建模。参数…...

编程日记 2025/6/28 1:29:05

基于Spring Boot的家庭理财系统app的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2025/6/28 1:23:49

SQLAlchemy系列教程：事件驱动的数据库交互

在现代Web应用开发中&#xff0c;数据库交互往往需要超越简单的CRUD操作。当用户注册成功后自动发送欢迎邮件&#xff1f;在订单创建时同步库存数据&#xff1f;这些场景都需要监听数据库状态变化并触发相应逻辑。SQLAlchemy的事件系统为此提供了优雅的解决方案。 本文将深入解…...

编程日记 2025/6/28 3:25:59

linux基本命令(2)--进程命令PS

其实吧, 在linux命令下 输入man ps也可以&#xff0c;一行行拖下去也是看到解析的。退出不看的时候记得按q哦 基本介绍 国际惯例介绍下这个命令的用途。 在Linux下ps命令是用于查看系统上运行的进程的最基本的命令之一。它提供了当前进程的同时&#xff0c;如用户ID&#xf…...

编程日记 2025/6/28 6:50:54

android adb 查看设备传感器

Android ADB 查看设备传感器的使用技巧 在Android开发中&#xff0c;了解设备的传感器是非常重要的一步。不论是开发健康应用、游戏&#xff0c;还是任何需要感知用户环境的应用&#xff0c;传感器的使用都离不开对其数据的获取。Android Debug Bridge&#xff08;ADB&#xf…...

编程日记 2025/6/30 15:24:42

Verilog HDL 100道面试题及参考答案

目录 Verilog HDL 的四种基本逻辑值是什么？ 关键字 reg 和 wire 的主要区别是什么？ 解释阻塞赋值（=）与非阻塞赋值（<=）的区别，并举例说明。 如何声明一个双向端口（inout）？ 位拼接操作符是什么？举例说明其用法。 拼接信号和常量 拼接常量和信号 重复拼接 以…...

编程日记 2025/6/28 3:10:34

Java基础-26-多态-认识多态

在Java编程中&#xff0c;多态&#xff08;Polymorphism&#xff09; 是面向对象编程的核心概念之一。通过多态&#xff0c;我们可以编写更加灵活、可扩展的代码。本文将详细介绍什么是多态、如何实现多态&#xff0c;并通过具体的例子来帮助你更好地理解这一重要概念。 一、什…...

编程日记 2025/6/28 1:23:51

安当CAS密码应用系统：构建企业级固件签名体系的解决方案

在工业互联网与智能设备爆发式增长的今天&#xff0c;固件安全已成为设备安全的"最后一道防线"。据IDC统计&#xff0c;2025年全球68%的固件攻击将利用密钥管理漏洞发起。传统固件签名方案依赖企业自购硬件加密机&#xff08;HSM&#xff09;&#xff0c;不仅面临高额…...

编程日记 2025/6/30 20:17:31

文法 2025/3/3

文法的定义 一个文法G是一个四元组&#xff1a;G(,,S,P) &#xff1a;一个非空有限的终极符号集合。它的每个元素称为终极符号或终极符&#xff0c;一般用小写字母表示。终极符号是一个语言不可再分的基本符号。 &#xff1a;一个非空有限的非终极符号集合。它的每个元素称为…...

编程日记 2025/6/28 1:23:48

论文阅读：Dual Anchor Graph Fuzzy Clustering for Multiview Data

论文地址:Dual Anchor Graph Fuzzy Clustering for Multiview Data | IEEE Journals & Magazine | IEEE Xplore 代码地址&#xff1a;https://github.com/BBKing49/DAG_FC 摘要 多视角锚图聚类近年来成为一个重要的研究领域&#xff0c;催生了多个高效的方法。然而&#…...

编程日记 2025/6/28 1:24:11

【分享】内外网文件摆渡系统：让数据传输更安全更可靠

【分享】Ftrans内外网文件摆渡系统&#xff1a;让数据传输更安全更可靠&#xff01; 随着大数据时代的到来&#xff0c;数据的重要性日渐得到重视&#xff0c;数据作为数字经济时代下的基础性资源和战略性资源&#xff0c;是决定国家经济发展水平和竞争力的核心驱动力。以行业…...

编程日记 2025/6/29 2:18:20

Spring Boot 中的 Aware 接口以及 ApplicationContextAware 的详细说明、使用示例及注意事项

以下是关于 Spring Boot 中的 Aware 接口以及 ApplicationContextAware 的详细说明、使用示例及注意事项&#xff1a; 一、Aware 接口简介 Spring 框架提供了一系列 Aware 接口&#xff0c;用于让 Bean 在初始化时感知并获取 Spring 容器中的特定组件。这些接口通过回调方法&a…...

编程日记 2025/6/28 6:40:18

nginx的自定义日志

正常nginx的报错都会在 想要把日志独立出来需要用到俩个参数 然后创建目录 mkdir /var/log/timingxu.org 最后实验一下 结果实验成功...

编程日记 2025/6/28 4:08:15

【蓝桥杯速成】| 17.完全背包（一维easy版）

题目一&#xff1a;爬楼梯 问题描述 57. 爬楼梯&#xff08;第八期模拟笔试&#xff09; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬至多m (1 < m < n)个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 注意&#xff1a;给定 n 是一个正整…...

编程日记 2025/6/30 16:59:47

算法导论（动态规划）——路径问题

算法思路&#xff08;62&#xff09; 状态表示&#xff1a; 在解决“路径类”问题时&#xff0c;常见的状态表示形式有两种&#xff1a; 形式一&#xff1a;从位置 [i,j] 出发的路径计数。形式二&#xff1a;从起始位置到达位置 [i,j] 的路径计数。 本文选择第二种形式来定义状…...

编程日记 2025/7/1 1:18:27

Python Flask并发demo（http并发与锁）独占接口、monkey功能还不太确定

文章目录 Flask 并发接口实现示例代码示例关键并发支持特性解析1. **Gevent monkey patching**&#xff1a;2. **线程锁控制**&#xff1a;3. **协程服务器**&#xff1a;4. **状态标志与异常处理**&#xff1a;5. **接口差异化处理**&#xff1a; 使用场景- 需要处理高并发请求…...

编程日记 2025/6/28 21:55:01

stm32第十天外部中断和NVIC讲解

一&#xff1a;外部中断基础知识 1.STM32外部中断框架 中断的概念&#xff1a;在主程序运行过程中&#xff0c;出现了特点的中断触发条件&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转而去处理中断程序&#xff0c;处理完成后又返回原来被暂停的位置继续运行 1&…...

编程日记 2025/6/30 12:39:23

音视频 ColorSpace色彩空间详解

前言 基于前篇介绍YUV格式，本文继续介绍另一个重要概念颜色空间，又叫色彩空间；主要用于在音视频开发中的色彩空间转换。 色彩空间Color Space 色彩空间由色彩模型和色域共同定义。当色彩模型与特定的描述相关联以后，就称为色彩空间。 色彩模型Color Model 色彩模型Col…...

编程日记 2025/6/28 2:26:43

通义万相2.1 你的视频创作之路

通义万相2.1的全面介绍 一、核心功能与技术特点 通义万相2.1是阿里巴巴达摩院研发的多模态生成式AI模型&#xff0c;以视频生成为核心&#xff0c;同时支持图像、3D内容及中英文文字特效生成。其核心能力包括&#xff1a; 复杂动作与物理规律建模 能够稳定生成包含人体旋转、…...

编程日记 2025/6/29 13:15:50

动态规划学习——背包问题

一&#xff0c;开心的金明 题目链接&#xff1a;P1060 [NOIP 2006 普及组] 开心的金明 - 洛谷 本题是一道经典的01背包问题&#xff0c;状态表示和状态定义可以仿照01背包的来。 01背包传送门&#xff1a;【背包问题 】01背包_01背包算法题链接-CSDN博客 dp[i][j]表示从前i个物…...

编程日记 2025/6/28 5:44:52

oracle数据泵操作

源库操作 查询目录对象是否已定义 plsql执行 select * from dba_directories t where t.directory_name MYDIR;先创建一个d盘databack文件夹上边语句查询,无返回数据&#xff0c;则创建&#xff0c;若提示权限不足&#xff0c;请授权 plsql执行 create directory mydir as …...

编程日记 2025/6/30 16:25:32

flutter框架中文文档，android智能手机编程答案

RecyclerView优化全攻略&#xff1a;从数据处理到性能提升 字节跳动四面有三面都问了这个问题&#xff0c;在此做了整理&#xff0c;希望可以帮助到大家&#xff0c;欢迎查漏补缺。 数据处理和视图加载分离 我们知道&#xff0c;从远端拉取数据肯定是要放在异步的&#xff0…...

编程日记 2025/6/28 1:27:23

Sourcetree安装教程及配合Gitee的使用

零、SourceTree介绍 SourceTree 是一款由 Atlassian 公司开发的免费图形化版本控制工具&#xff0c;支持 Git 和 Mercurial 两大版本控制系统。它通过直观的界面简化了代码管理操作&#xff0c;适合开发者和团队高效管理项目代码。 核心功能 可视化操作 无需记忆命令行&#x…...

编程日记 2025/6/28 4:59:30

.net farmework 4.8 类库中添加 wpf 窗体

一般正常情况下&#xff0c;在 .net farmework 4.8 类库中是无法添加 wpf 窗体的&#xff0c;如下图 但是可以添加 winform 窗体&#xff0c;如果想添加 wpf 窗体&#xff0c;需要一些更改 1.添加库 在程序集这里添加库&#xff0c;直接搜索名字即可 需要添加下面库&#xff1…...

编程日记 2025/6/28 4:39:59

某合约任意提取BNB漏洞

1背景描述 合约是一个在满足特定条件时在区块链上执行代码的程序&#xff0c;各方以数字签署合同的方式准许并维护它的其运行。这些代码可以是向朋友汇款、买卖 NFT 虚拟商品等一系列复杂的内容。 存在漏洞的目标合约是一个结合Meme文化病毒式传播与去中心化金融&#xff08;D…...

编程日记 2025/6/27 11:19:44

Python+新版DeepSeek V3轻松开发Agent

1 简介 前几天新版DeepSeek V3模型&#xff08;代号250324&#xff09;更新发布。作为支持函数调用的先进开源大模型&#xff0c;我们可以基于它进行高效的Agent功能开发&#xff0c;这也是当下非常火热&#x1f525;的AI应用领域。 今天的文章中&#xff0c;我就将带大家以P…...

编程日记 2025/7/1 19:46:03

Linux内核网络栈：数据发送流程解析

引言 在Linux内核网络栈中，数据的发送过程涉及到多个层次的协作，从应用层的系统调用，到传输层协议的实现，再到网络层和链路层的处理，最终通过网络设备将数据包发送出去。这一过程需要多个关键结构体和回调函数的参与，包括struct proto、struct proto_ops和struct net_de…...

编程日记 2025/7/1 8:50:31

[leetcode]2492. 两个城市间路径的最小分数(并查集 排序后建边)

题目链接 题意 给定一个 n n n个点 m m m条边的无向图 每条边有边权 求1-n的路径中最小的边权是多少 每条路可以重复走 思路 把边按边权降序排序 用并查集维护连通性 遍历每条边 每次合并边的起点和终点 如果1和n联通 并且这条边在1和n的这个连通块中 就对ans取min Code…...

编程日记 2025/7/1 4:39:23

git 常用操作整理

一.git 的概念 Git 是一个分布式版本控制系统&#xff0c;用于跟踪文件的更改历史&#xff0c;帮助开发者管理代码的版本。以下是关于 Git 的一些基本概念&#xff1a; 1. 仓库&#xff08;Repository&#xff09; - **本地仓库**&#xff1a;在你的计算机上存储的项目文件及…...

编程日记 2025/6/28 1:23:52

AWS API Gateway Canary部署实战：Lambda到ECS的平滑迁移指南

在云原生架构中，如何实现服务平滑迁移是一个常见挑战。本文将详细介绍如何利用AWS API Gateway的Canary部署功能，实现从Lambda函数到ECS服务的无缝迁移，同时保证客户端无感知并提供便捷的回退机制。 一、迁移方案概述 在本方案中，我们将实现以下目标： 将现有Lambda服务平…...

编程日记 2025/6/30 20:32:53

MyBatisPlus不等于如何使用

在 MyBatis Plus 中&#xff0c;ne 方法用于构建不等于条件的 SQL 查询。以下是 ne 方法的详细用法&#xff1a; 基本用法 ne 方法可以用于 QueryWrapper 或 LambdaQueryWrapper 中&#xff0c;用于指定某个字段的值不等于指定的值。它对应于 SQL 中的 ! 或 <> 操作符。 …...

编程日记 2025/6/29 8:40:01

Java面试黄金宝典25

1. 对 100 万个玩家的积分中前 100 名积分进行实时更新 定义 该问题旨在实时追踪并展示 100 万个玩家中积分排名前 100 的玩家信息。随着玩家通过完成任务或获取金钱改变积分&#xff0c;系统需要迅速更新排名并展示最新的前 100 名。 要点 运用 Java 的 PriorityQueue 构建…...

编程日记 2025/6/28 1:23:53

洛谷题单1-P5708 【深基2.习2】三角形面积-python-流程图重构

题目描述 一个三角形的三边长分别是 a a a、 b b b、 c c c&#xff0c;那么它的面积为 p ( p − a ) ( p − b ) ( p − c ) \sqrt{p(p-a)(p-b)(p-c)} p(p−a)(p−b)(p−c) ​&#xff0c;其中 p 1 2 ( a b c ) p\frac{1}{2}(abc) p21​(abc)。输入这三个数字&#xff…...

编程日记 2025/6/30 4:38:27