轻松上手安全帽检测

及时排查安全帽佩戴的规范性并给予提醒,可以大大降低施工安全隐患。通过使用PaddleX中目标检测算法PP-YOLOV2进行视频分析,监控安全帽佩戴,可以提升施工安全系数,辅助实现施工现场智能化建设。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

轻松上手安全帽检测 - 创想鸟

1.项目说明

在该项目中,主要向大家介绍如何使用目标检测来实现对安全帽的检测,涉及代码以及优化过程亦可用于其它目标检测任务等。

在施工现场,对于来往人员,以及工作人员而言,安全问题至关重要。而安全帽更是保障施工现场在场人员安全的第一防线,因此需要对场地中的人员进行安全提醒。当人员未佩戴安全帽进入施工场所时,人为监管耗时耗力,而且不易实时监管,过程繁琐、消耗人力且实时性较差。针对上述问题,希望通过视频监控->目标检测->智能督导的方式智能、高效的完成此任务。

5月12日晚19:00,我们将在线分享安全帽检测方案详解和避坑指南,30分钟直达产业项目落地! 欢迎大家扫码报名直播课,如有更多技术交流与合作,也欢迎大家扫码进群。

轻松上手安全帽检测 - 创想鸟

业务难点:

精度要求高 由于涉及安全问题,需要精度非常高才能保证对施工场所人员的安全督导。需要专门针对此目标的检测算法进行优化。精度要求高 监控受拍摄角度、光线变化、天气影响,有时会存在遮挡,导致安全帽显示不全,对检测具有一定的干扰。小目标检测 由于实际使用过程中,人员离镜头较远,因此需要模型对小目标的检测有较低的漏检率。轻松上手安全帽检测 - 创想鸟

2.数据准备

数据集中包含了5000张已经标注好的数据。该项目采用目标检测的标注方式,在本文档中提供了VOC数据集格式。

解压项目提供的数据:

In [ ]

!unzip  /home/aistudio/data/data50329/HelmetDetection.zip -d /home/aistudio/work/dataset

更改一下命名:

dataset/                          dataset/  ├── annotations/      -->         ├── Annotations/  ├── images/                       ├── JPEGImages/

In [ ]

%cd /home/aistudio/work/dataset%mv annotations Annotations%mv images JPEGImages

数据集分类情况: head , helmet, person.

更多数据格式信息请参考数据标注说明文档

安装PaddleX:

In [ ]

!pip install paddlex

数据切分 将训练集和验证集按照8.5:1.5的比例划分。 PaddleX中提供了简单易用的API,方便用户直接使用进行数据划分。In [ ]

!paddlex --split_dataset --format voc --dataset_dir /home/aistudio/work/dataset --val_value 0.15
dataset/                          dataset/  ├── Annotations/      -->         ├── Annotations/  ├── JPEGImages/                   ├── JPEGImages/                                    ├── labels.txt                                    ├── train_list.txt                                    ├── val_list.txt

3.模型选择

PaddleX提供了丰富的视觉模型,在目标检测中提供了RCNN和YOLO系列模型。在本项目中采用YOLO作为检测模型进行安全帽检测。

4. 模型训练

在本项目中,采用YOLOV3作为安全帽检测的基线模型,以COCO指标作为评估指标。具体代码请参考train.py

运行如下代码开始训练模型:

In [ ]

# 单卡训练%cd /home/aistudio/!python /home/aistudio/code/train.py

In [ ]

# 四卡训练%cd /home/aistudio/!export CUDA_VISIBLE_DEVICES=0,1,2,3!python -m paddle.distributed.launch --gpus 0,1,2,3 /home/aistudio/code/train.py

训练过程说明轻松上手安全帽检测 - 创想鸟

5.模型优化(进阶)

精度提升 为了进一步提升模型的精度,可以通过coco_error_analysis

精度优化思路分析

本小节侧重展示在模型迭代过程中优化精度的思路,在本案例中,有些优化策略获得了精度收益,而有些没有。在其他场景中,可根据实际情况尝试这些优化策略。

(1) 基线模型选择

相较于二阶段检测模型,单阶段检测模型的精度略低但是速度更快。考虑到是部署到GPU端,本案例选择单阶段检测模型YOLOV3作为基线模型,其骨干网络选择DarkNet53。训练完成后,模型在验证集上的精度如下:

模型 推理时间 (ms/image) map(Iou-0.5) (coco)mmap 安全帽AP(Iou-0.5)

baseline: YOLOv3 + DarkNet53 + cluster_yolo_anchor + img_size(480)50.3461.639.294.58

(2) 基线模型效果分析与优化

使用PaddleX提供的paddlex.det.coco_error_analysis接口对模型在验证集上预测错误的原因进行分析,分析结果以图表的形式展示如下:

allclass head person helmet

@@##@@@@##@@@@##@@@@##@@

分析图表展示了7条Precision-Recall(PR)曲线,每一条曲线表示的Average Precision (AP)比它左边那条高,原因是逐步放宽了评估要求。以helmet类为例,各条PR曲线的评估要求解释如下:

C75: 在IoU设置为0.75时的PR曲线, AP为0.681。C50: 在IoU设置为0.5时的PR曲线,AP为0.946。C50与C75之间的白色区域面积代表将IoU从0.75放宽至0.5带来的AP增益。Loc: 在IoU设置为0.1时的PR曲线,AP为0.959。Loc与C50之间的蓝色区域面积代表将IoU从0.5放宽至0.1带来的AP增益。蓝色区域面积越大,表示越多的检测框位置不够精准。Sim: 在Loc的基础上,如果检测框与真值框的类别不相同,但两者同属于一个亚类,则不认为该检测框是错误的,在这种评估要求下的PR曲线, AP为0.961。Sim与Loc之间的红色区域面积越大,表示子类间的混淆程度越高。VOC格式的数据集所有的类别都属于同一个亚类。Oth: 在Sim的基础上,如果检测框与真值框的亚类不相同,则不认为该检测框是错误的,在这种评估要求下的PR曲线,AP为0.961。Oth与Sim之间的绿色区域面积越大,表示亚类间的混淆程度越高。VOC格式的数据集中所有的类别都属于同一个亚类,故不存在亚类间的混淆。BG: 在Oth的基础上,背景区域上的检测框不认为是错误的,在这种评估要求下的PR曲线,AP为0.970。BG与Oth之间的紫色区域面积越大,表示背景区域被误检的数量越多。FN: 在BG的基础上,漏检的真值框不认为是错误的,在这种评估要求下的PR曲线,AP为1.00。FN与BG之间的橙色区域面积越大,表示漏检的真值框数量越多。

从分析图表中可以看出,head、helmet两类检测效果较好,但仍然存在漏检的情况,特别是person存在很大的漏检问题;此外,通过helmet中C75指标可以看出,其相对于C50的0.946而言有些差了,因此定位性能有待进一步提高。为进一步理解造成这些问题的原因,将验证集上的预测结果进行了可视化,然后发现数据集标注存在以下问题:

本数据集主要考虑到头部和安全帽的检测,因此在人检测时,有个图片中标注了,而有的图片中没有标注,从而导致学习失效,引发person漏检。head与helmet大多数情况标注较好,但由于部分拍摄角度导致有的图片中的head和helmet发生重叠以及太小导致学习有困难。

考虑到漏检问题,一般是特征学习不够,无法识别出物体,因此基于这个方向,尝试替换backbone: DarkNet53 –> ResNet50_vd_dcn,在指标上的提升如下:

模型 推理时间 (ms/image) map(Iou-0.5) (coco)mmap 安全帽AP(Iou-0.5)

YOLOv3 + ResNet50_vd_dcn + cluster_yolo_anchor+img_size(480)53.8161.739.195.35

考虑到定位问题,通过尝试放大图片,不同的网络结构以及定位的优化策略: 利用cluster_yolo_anchor生成聚类的anchor或开启iou_aware。最终得到上线模型PPYOLOV2的精度如下:

模型 推理时间 (ms/image) map(Iou-0.5) (coco)mmap 安全帽AP(Iou-0.5)

PPYOLOV2 + ResNet50_vd_dcn + img_size(608)81.5261.641.395.32

其中helmet类误差分析如下图:

轻松上手安全帽检测 - 创想鸟

从分析表中可以看出:

C75指标效果明显改善,定位更加准确:从0.681提升到0.742。其中BG到FN的差距从0.03降低到了0.02,说明漏检情况有所改善。其中Loc与Sim的差距从0.002降低到了0.001,说明混淆程度也下降了。其中Oth与BG的差距从0.019降低到了0.015,说明检测错误下降了。

本项目优化整体分析可归纳为以下几点:

通过选用适当更优的骨干网络可以改善漏检的情况,因此漏检方面的优化可以考虑先从骨干网络替换上开始——当然必要的数据清洗也是不可缺少的,要是数据集本身漏标,则会从根本上影响模型的学习。通过放大图像,可以对一些中小目标的物体检测起到一定的优化作用。通过聚类anchor以及iou_aware等操作可以提高模型的定位能力,直接体现是再高Iou上也能有更好的表现。【因此,定位不准可以从模型的anchor以及模型的结构上入手进行优化】

(3) 数据增强选择

训练预处理1(a1) 验证预处理

MixupImage(mixup_epoch=-1)Resize(target_size=480, interp=’CUBIC’)RandomDistort()Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225])RandomExpand(im_padding_value=[123.675, 116.28, 103.53])
RandomCrop()
RandomHorizontalFlip()
BatchRandomResize(target_sizes=[320, 352, 384, 416, 448, 480, 512, 544, 576, 608],interp=’RANDOM’)
Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225])

在加入了RandomHorizontalFlip、RandomDistort、RandomCrop、RandomExpand、BatchRandomResize、MixupImage这几种数据增强方法后,对模型的优化是有一定的积极作用了,在取消这些预处理后,模型性能会有一定的下降。

PS:建议在训练初期都加上这些预处理方法,到后期模型超参数以及相关结构确定最优之后,再进行数据方面的再优化: 比如数据清洗,数据预处理方法筛选等。

6优化结论

采用PaddleX在Tesla V100上测试模型的推理时间(输入数据拷贝至GPU的时间、计算时间、数据拷贝至CPU的时间),推理时间如下表所示:(十次推理取平均耗时)

模型 推理时间 (ms/image) map(Iou-0.5) (coco)mmap 安全帽AP(Iou-0.5)

baseline: YOLOv3 + DarkNet53 + cluster_yolo_anchor + img_size(480)50.3461.639.294.58YOLOv3 + ResNet50_vd_dcn + cluster_yolo_anchor+img_size(480)53.8161.739.195.35PPYOLO + ResNet50_vd_dcn + iou_aware + img_size(480)72.8862.437.795.73PPYOLO + ResNet50_vd_dcn + label_smooth=True + iou_aware + img_size(480)72.7663.540.696.83PPYOLO + ResNet50_vd_dcn + cluster_yolo_anchor + img_size(480)67.1461.839.895.08PPYOLOV2 + ResNet50_vd_dcn + img_size(608)81.5261.641.395.32PPYOLOV2 + ResNet101_vd_dcn + img_size(608)106.6261.340.695.15

注意:

608的图像大小,一般使用默认的anchors进行训练和推理即可。cluster_yolo_anchor: 用于生成拟合数据集的模型anchor。label_smooth: 通常用于当模型能够较好的拟合训练集时,进行正则化处理,提高训练模型的泛化能力——即测试/评估精度。

anchors = train_dataset.cluster_yolo_anchor(num_anchors=9, image_size=480)anchor_masks = [[6, 7, 8], [3, 4, 5], [0, 1, 2]]

优化进展说明:

1.通过选择更好的backbone作为特征提取的骨干网络可以提高识别率、降低漏检率。

剪刀手 剪刀手

全自动AI剪辑神器:日剪千条AI原创视频,零非原创风险,批量高效制作引爆流量!免费体验,轻松上手!

剪刀手 35 查看详情 剪刀手

2.通过选择更好的检测架构可以提高检测的mmap值——即Neck,Head部分的优化可以提高ap。

3.缩放适当的图像大小可以提高模型的识别率,但是存在一定的阈值——当图像大小到某一个阈值时会导致精度下降。

一般图像大小选择(YOLO系列):320,480, 608。一般图像如果较大,物体也比较大,可以较为放心的缩小图像大小再进行相关的训练和预测。物体较小,不易缩小,可以适当的裁剪划分原图或放大,并处理对应的标注数据,再进行训练。

4.通过cluster_yolo_anchor生成当前网络输入图像大小下拟合数据集的预置anchors,利用新生成的anchors替换原来的默认anchor,使得模型预测定位上框选位置更准确。

5.通过PPYOLO两个实验,一个使用iou_aware,一个不是使用iou_aware而采用聚类得到的anchor提高定位能力;分析数据发现在定位信息优化上,iou_aware在当前数据集上表现更好,但推理时间也有所提升。

6.通过PPYOLO两个实验,一个使用label_smooth,一个不使用,分析出使用label_smooth可以让模型在验证集上表现更好了。

通过以上的简单优化方式,获取了两个较好的模型结果:

模型 推理时间 (ms/image) map(Iou-0.5) (coco)mmap 安全帽AP(Iou-0.5)

PPYOLO + ResNet50_vd_dcn + label_smooth=True + iou_aware + img_size(480)72.7663.540.696.83PPYOLOV2 + ResNet50_vd_dcn + img_size(608)81.5261.641.395.32

7.模型预测

运行如下代码:

In [ ]

!python code/infer.py

则可生成result.txt文件并显示预测结果图片,result.txt文件中会显示图片中每个检测框的位置、类别及置信度, 从而实现了安全帽的自动检测。

预测结果如下:

轻松上手安全帽检测 - 创想鸟

8.模型导出

模型训练后保存在output文件夹,如果要使用PaddleInference进行部署需要导出成静态图的模型,运行如下命令,会自动在output文件夹下创建一个inference_model的文件夹,用来存放导出后的模型。

In [ ]

!paddlex --export_inference --model_dir=/home/aistudio/models/yolov3_darknet53          --save_dir=output/inference_model --fixed_input_shape=[480,480]

基于导出的模型,在单张图像上做推理:

In [ ]

import paddlex as pdxpredictor = pdx.deploy.Predictor('/home/aistudio/output/inference_model/inference_model')img_path = '/home/aistudio/work/97ce96584315ba13a4927c8a0.jpg'result = predictor.predict(img_file=img_path)print(result)

可视化:

In [9]

%matplotlib inlineimport matplotlib.pyplot as plt # plt 用于显示图片import numpy as npimport cv2import ossave_dir='/home/aistudio/'pdx.det.visualize(img_path, result, save_dir=save_dir)path,filename = os.path.split(img_path)output_path = os.path.join(save_dir,"visualize_"+filename)pic = cv2.imread(output_path)pic = cv2.cvtColor(pic, cv2.COLOR_BGR2RGB)plt.imshow(pic)plt.axis('off') # 不显示坐标轴plt.show()
2022-05-11 11:11:49 [INFO]The visualized result is saved at /home/aistudio/visualize_97ce96584315ba13a4927c8a0.jpg

对视频数据抽帧进行检测:

In [ ]

import cv2import paddlex as pdximport numpy as npimport colorsysimport ospredictor = pdx.deploy.Predictor('/home/aistudio/output/inference_model/inference_model')cap = cv2.VideoCapture('/home/aistudio/work/Industry.mp4')save_dir='/home/aistudio/frames'if not os.path.exists(save_dir):    os.makedirs(save_dir)i = 1det_rate = 20save_dir = "/home/aistudio/frames/"while cap.isOpened():    ret, frame = cap.read()    if ret :        if i%det_rate==0:            result = predictor.predict(frame)            print(i)            vis_img = pdx.det.visualize(frame, result, save_dir=save_dir)                        # 本地环境可以实时查看安全帽检测效果            # cv2.imshow('hatdet', vis_img)            if cv2.waitKey(1) & 0xFF == ord('q'):                break                i += 1    else:        breakcap.release()

注意:设定 fixed_input_shape 的数值需与 eval_transforms 中设置的 target_size 数值上保持一致。

9.模型上线选择

本案例面向GPU端的最终方案是选择一阶段检测模型PPYOLOV2,其骨干网络选择加入了可变形卷积(DCN)的ResNet50_vd,训练阶段数据增强策略采用RandomHorizontalFlip、RandomDistort、RandomCrop等。

在Tesla V100的Linux系统下,模型的推理时间大约为81.52ms/image,包括transform、输入数据拷贝至GPU的时间、计算时间、数据拷贝至CPU的时间。

模型 推理时间 (ms/image) map(Iou-0.5) (coco)mmap 安全帽AP(Iou-0.5)

PPYOLOV2 + ResNet50_vd_dcn + img_size(608)81.5261.641.395.32

上线模型的PR曲线:

轻松上手安全帽检测 - 创想鸟

在本项目中的安全帽检测数据中,标注信息本身存在一定的缺漏,导致部分类别学习失效。但针对本项目的安全帽检测问题而言,person(人)这一类别影响不大,因此可以在mmap较大的基础上主要看helmet(安全帽)的精度即可。通过COCO的评估指标,可以使多类别的检测模型的评估更加符合实际应用;虽然我们可以看出在该数据集中,有一个类别对整体的map与mmap有较大影响,但是通过COCO指标能够取得一个相对数据集更综合表现(不同Iou尺度下)的一个模型。

注意: 通过VOC指标也许能够取得更好的Iou-0.5指标下更好的数据,但是却会使得对多Iou尺度的一个评估,使得得到该评估指标下最好的模型未必在其它Iou尺度下也有最好的表现。

10.模型部署方式

10.1 Jetson设备C++ inference部署

模型部署采用了PaddleX提供的C++ inference部署方案,在该方案中提供了在端侧设备Jetson部署Demo,用户可根据实际情况自行参考。

轻松上手安全帽检测 - 创想鸟

10.2 PaddleHub轻量级服务化部署

借助PaddleHub-Serving,可以将PaddleX的Inference Model进行快速部署,以提供在线预测的能力。参考链接:https://paddlex.readthedocs.io/zh_CN/release-1.3/deploy/hub_serving.html。

更新PaddleHub版本:“

In [ ]

!pip install --upgrade paddlehub -i https://pypi.tuna.tsinghua.edu.cn/simple

将PaddleX的Inference Model转换成PaddleHub的预训练模型,使用命令hub convert即可一键转换:

In [12]

!hub convert --model_dir /home/aistudio/output/inference_model/inference_model --module_name helmet_hub
The converted module is stored in `helmet_hub_1652238760.0615911`.

模型转换后,得到helmet_hub.tar.gz压缩包,在进行部署之前需要先安装到本机,使用命令hub install即可一键安装:

In [ ]

!hub install helmet_hub_1652166294.6532774/helmet_hub.tar.gz

接下来,只需要使用hub serving命令即可完成模型的一键部署:

In [ ]

!hub serving start -m helmet_hub

客户端请求:

In [ ]

# coding: utf8import requestsimport jsonimport cv2import base64def cv2_to_base64(image):    data = cv2.imencode('.jpg', image)[1]    return base64.b64encode(data.tostring()).decode('utf8')if __name__ == '__main__':    # 获取图片的base64编码格式    img1 = cv2_to_base64(cv2.imread("/home/aistudio/work/97ce96584315ba13a4927c8a0.jpg"))    data = {'images': [img1]}    # 指定content-type    headers = {"Content-type": "application/json"}    # 发送HTTP请求    url = "http://127.0.0.1:8866/predict/helmet_hub"    r = requests.post(url=url, headers=headers, data=json.dumps(data))    # 打印预测结果    print(r.json()["results"])

轻松上手安全帽检测 - 创想鸟轻松上手安全帽检测 - 创想鸟轻松上手安全帽检测 - 创想鸟轻松上手安全帽检测 - 创想鸟

以上就是轻松上手安全帽检测的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/318787.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月5日 08:59:16
下一篇 2025年11月5日 09:02:55

相关推荐

  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • 如何解决本地图片在使用 mask JS 库时出现的跨域错误?

    如何跨越localhost使用本地图片? 问题: 在本地使用mask js库时,引入本地图片会报跨域错误。 解决方案: 要解决此问题,需要使用本地服务器启动文件,以http或https协议访问图片,而不是使用file://协议。例如: python -m http.server 8000 然后,可以…

    2025年12月24日
    200
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 如何模拟Windows 10 设置界面中的鼠标悬浮放大效果?

    win10设置界面的鼠标移动显示周边的样式(探照灯效果)的实现方式 在windows设置界面的鼠标悬浮效果中,光标周围会显示一个放大区域。在前端开发中,可以通过多种方式实现类似的效果。 使用css 使用css的transform和box-shadow属性。通过将transform: scale(1.…

    2025年12月24日
    200
  • 为什么我的 Safari 自定义样式表在百度页面上失效了?

    为什么在 Safari 中自定义样式表未能正常工作? 在 Safari 的偏好设置中设置自定义样式表后,您对其进行测试却发现效果不同。在您自己的网页中,样式有效,而在百度页面中却失效。 造成这种情况的原因是,第一个访问的项目使用了文件协议,可以访问本地目录中的图片文件。而第二个访问的百度使用了 ht…

    2025年12月24日
    000
  • 如何用前端实现 Windows 10 设置界面的鼠标移动探照灯效果?

    如何在前端实现 Windows 10 设置界面中的鼠标移动探照灯效果 想要在前端开发中实现 Windows 10 设置界面中类似的鼠标移动探照灯效果,可以通过以下途径: CSS 解决方案 DEMO 1: Windows 10 网格悬停效果:https://codepen.io/tr4553r7/pe…

    2025年12月24日
    000
  • 使用CSS mask属性指定图片URL时,为什么浏览器无法加载图片?

    css mask属性未能加载图片的解决方法 使用css mask属性指定图片url时,如示例中所示: mask: url(“https://api.iconify.design/mdi:apple-icloud.svg”) center / contain no-repeat; 但是,在网络面板中却…

    2025年12月24日
    000
  • 如何用CSS Paint API为网页元素添加时尚的斑马线边框?

    为元素添加时尚的斑马线边框 在网页设计中,有时我们需要添加时尚的边框来提升元素的视觉效果。其中,斑马线边框是一种既醒目又别致的设计元素。 实现斜向斑马线边框 要实现斜向斑马线间隔圆环,我们可以使用css paint api。该api提供了强大的功能,可以让我们在元素上绘制复杂的图形。 立即学习“前端…

    2025年12月24日
    000
  • 图片如何不撑高父容器?

    如何让图片不撑高父容器? 当父容器包含不同高度的子元素时,父容器的高度通常会被最高元素撑开。如果你希望父容器的高度由文本内容撑开,避免图片对其产生影响,可以通过以下 css 解决方法: 绝对定位元素: .child-image { position: absolute; top: 0; left: …

    2025年12月24日
    000
  • 使用 Mask 导入本地图片时,如何解决跨域问题?

    跨域疑难:如何解决 mask 引入本地图片产生的跨域问题? 在使用 mask 导入本地图片时,你可能会遇到令人沮丧的跨域错误。为什么会出现跨域问题呢?让我们深入了解一下: mask 框架假设你以 http(s) 协议加载你的 html 文件,而当使用 file:// 协议打开本地文件时,就会产生跨域…

    2025年12月24日
    200
  • CSS 帮助

    我正在尝试将文本附加到棕色框的左侧。我不能。我不知道代码有什么问题。请帮助我。 css .hero { position: relative; bottom: 80px; display: flex; justify-content: left; align-items: start; color:…

    2025年12月24日 好文分享
    200
  • 前端代码辅助工具:如何选择最可靠的AI工具?

    前端代码辅助工具:可靠性探讨 对于前端工程师来说,在HTML、CSS和JavaScript开发中借助AI工具是司空见惯的事情。然而,并非所有工具都能提供同等的可靠性。 个性化需求 关于哪个AI工具最可靠,这个问题没有一刀切的答案。每个人的使用习惯和项目需求各不相同。以下是一些影响选择的重要因素: 立…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信