使用paddleOCR完成价格提取并实现可视化

该项目通过pyautogui控制鼠标点击金投网各省份页面并截图,利用paddleOCR提取废弃金属价格数据,经pymysql存入MySQL。再以Flask搭建后端,结合百度echart框架实现各省份价格实时动态可视化,解决了网站路径多变导致的爬虫获取数据难题。

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

使用paddleocr完成价格提取并实现可视化 - 创想鸟

一、项目介绍

基于文字提取技术paddleOCR实现在金投网上获取各个省份的当日废弃金属价格。区别于爬虫获取网页数据,本项目使用脚本控制鼠标来获取网页截图,用paddleocr技术提取价格数据,在不使用爬虫的技术下也能精准的获取想要的价格数据。

使用paddleOCR完成价格提取并实现可视化 - 创想鸟

本项目还借用百度的echart框架,再加上flask技术,搭建了一个简单的网页,用于对各省份价格数据的实时动态可视化,下面是可视化网页的效果展示。

使用paddleOCR完成价格提取并实现可视化 - 创想鸟

二、详细说明

最近铁的价格波动较大,去网站上搜了一下各省份的价格,发现铁价呈现南高北低,相邻省份价格相近等情况,于是想把这网页上的数据爬取下来并加上一个中国地图实现各省份铁价可视化,研究了金投网后发现由于废弃金属产品较多,数据量过大,该网页采取一个省份设置一个路径的方式存储一个产品的数据,不利于在单个网页获取全部数据,且不同时间其路径也不一样,用爬虫来获取数据难度有点高,于是借鉴了之前写的项目,基于paddleOCR获取数字产品价格,作者编写了脚本控制鼠标点击并截图,后期通过文字提取的方式来获取网页数据。 接下来会分几步来简述项目实现过程。
2.1、脚本 通过pyautogui库控制鼠标点击,由于数据量过大,这里就简单展示前两个省份的代码。(受限于这是一个在线的notebook,无法进行鼠标键盘的交互。所以下面的代码仅供展示作用,不要运行!)

In [ ]

import time  # 加入time函数,可以控制点击时间,等网页完全打开后再截图 import pyautogui as pg  # 用于控制鼠标 from PIL import ImageGrab  # 截取网页 city = ["北京", "上海", "天津", "重庆", "广东", "浙江", "江苏", "江西",         "安徽", "河南", "河北", "山东", "福建", "湖南", "湖北",         "广西", "山西", "陕西", "宁夏", "甘肃", "新疆", "青海", "海南",         "贵州", "云南", "四川", "西藏", "内蒙古", "辽宁", "吉林", "黑龙江"] time.sleep(5)  # 进入界面后等待5秒 pg.click(360, 600)  # 选择第一个城市(北京),360,600为鼠标在屏幕上的坐标点。 pg.click(900, 485)  # 把鼠标移开 time.sleep(2) image = ImageGrab.grab(bbox=(230, 600, 520, 720))  # 截图 image.save(str(0) + ".png")  # 保存图片 print("已保存"+city[0]+"城市铁价") pg.click(600, 485)  # 回到省份界面 time.sleep(2) pg.click(480, 600)  # 选择第2个城市(上海) time.sleep(1) pg.click(900, 485)  # 把鼠标移开 time.sleep(2) image = ImageGrab.grab(bbox=(230, 600, 520, 720))  # 截图 image.save(str(1) + ".png")  # 保存图片 print("已保存"+city[1]+"城市铁价") pg.click(600, 485)  # 回到省份界面 time.sleep(2)
2.2、文字提取 先给大家简单介绍一下paddleOCR,PaddleOCR,一款文本识别效果不输于商用的Python库!支持多语言识别,目前能够支持 80 多种语言;除了能对中文、英语、数字识别之外,还能应对字体倾斜、文本中含有小数点字符等复杂情况;提供有丰富的 OCR ;域相关工具供我们使用,方便我们制作自己的数据集、用于训练
2.2.1、解压数据集(价格截图) 下图为截取的图片

使用paddleOCR完成价格提取并实现可视化 - 创想鸟

In [1]

!unzip -oq /home/aistudio/data/data163670/price_of_scrap_iron.zip -d price
2.2.2、下载paddleocr

In [2]

智谱AI开放平台 智谱AI开放平台

智谱AI大模型开放平台-新一代国产自主通用AI开放平台

智谱AI开放平台 85 查看详情 智谱AI开放平台

!pip install paddleocr
2.2.3、使用paddleocr技术提取价格数据

In [5]

from paddleocr import PaddleOCR money1 = []  # 用于存储ocr提取出来的数据 money_all = []  # 存储全部价格 all_address = ["北京", "上海", "天津", "重庆", "广东", "浙江", "江苏", "江西",                "安徽", "河南", "河北", "山东", "福建", "湖南", "湖北",                "广西", "山西", "陕西", "宁夏", "甘肃", "新疆", "青海", "海南",                "贵州", "云南", "四川", "西藏", "内蒙古", "辽宁", "吉林", "黑龙江"] ocr = PaddleOCR(use_angle_cls=True, lang="ch") for i in range(30):  # 把脚本截图图片通过OCR识别提取价格     img_path = str("price/各省废弃金属-铁-价格/"+str(i) + ".png")  # 设定价格图片路径     result = ocr.ocr(img_path, cls=False, det=True, rec=True)  # ocr读取     for line in result:         #print(line[1][0])  # 输出读取内容         money1.append(line[1][0])  # 存储     money = money1[1+(3*i)]  # 有3个数据,把第二个价格数据提取出来     money_all.append(money)  # 把价格录到总价格中     print("省份:"+all_address[i]+"    价格"+money_all[i])
[2022/08/10 16:10:57] ppocr DEBUG: Namespace(alpha=1.0, benchmark=False, beta=1.0, cls_batch_num=6, cls_image_shape='3, 48, 192', cls_model_dir='/home/aistudio/.paddleocr/whl/cls/ch_ppocr_mobile_v2.0_cls_infer', cls_thresh=0.9, cpu_threads=10, crop_res_save_dir='./output', det=True, det_algorithm='DB', det_db_box_thresh=0.6, det_db_score_mode='fast', det_db_thresh=0.3, det_db_unclip_ratio=1.5, det_east_cover_thresh=0.1, det_east_nms_thresh=0.2, det_east_score_thresh=0.8, det_fce_box_type='poly', det_limit_side_len=960, det_limit_type='max', det_model_dir='/home/aistudio/.paddleocr/whl/det/ch/ch_PP-OCRv3_det_infer', det_pse_box_thresh=0.85, det_pse_box_type='quad', det_pse_min_area=16, det_pse_scale=1, det_pse_thresh=0, det_sast_nms_thresh=0.2, det_sast_polygon=False, det_sast_score_thresh=0.5, draw_img_save_dir='./inference_results', drop_score=0.5, e2e_algorithm='PGNet', e2e_char_dict_path='./ppocr/utils/ic15_dict.txt', e2e_limit_side_len=768, e2e_limit_type='max', e2e_model_dir=None, e2e_pgnet_mode='fast', e2e_pgnet_score_thresh=0.5, e2e_pgnet_valid_set='totaltext', enable_mkldnn=False, fourier_degree=5, gpu_mem=500, help='==SUPPRESS==', image_dir=None, ir_optim=True, label_list=['0', '180'],, layout=True, layout_label_map=None, layout_path_model='lp://PubLayNet/ppyolov2_r50vd_dcn_365e_publaynet/config', max_batch_size=10, max_text_length=25, min_subgraph_size=15, mode='structure', ocr=True, ocr_version='PP-OCRv3', output='./output', precision='fp32', process_id=0, rec=True, rec_algorithm='SVTR_LCNet', rec_batch_num=6, rec_char_dict_path='/opt/conda/envs/python35-paddle120-env/lib/python3.7/site-packages/paddleocr/ppocr/utils/ppocr_keys_v1.txt', rec_image_shape='3, 48, 320', rec_model_dir='/home/aistudio/.paddleocr/whl/rec/ch/ch_PP-OCRv3_rec_infer', save_crop_res=False, save_log_path='./log_output/', scales=[8, 16, 32], show_log=True, structure_version='PP-STRUCTURE', table=True, table_char_dict_path=None, table_max_len=488, table_model_dir=None, total_process_num=1, type='ocr', use_angle_cls=True, use_dilation=False, use_gpu=False, use_mp=False, use_onnx=False, use_pdserving=False, use_space_char=True, use_tensorrt=False, vis_font_path='./doc/fonts/simfang.ttf', warmup=False) [2022/08/10 16:10:58] ppocr DEBUG: dt_boxes num : 3, elapse : 0.18548965454101562 [2022/08/10 16:11:00] ppocr DEBUG: rec_res num  : 3, elapse : 1.4084184169769287 省份:北京    价格1900.00 [2022/08/10 16:11:00] ppocr DEBUG: dt_boxes num : 3, elapse : 0.28911447525024414 [2022/08/10 16:11:01] ppocr DEBUG: rec_res num  : 3, elapse : 1.4035155773162842 省份:上海    价格2380.00 [2022/08/10 16:11:02] ppocr DEBUG: dt_boxes num : 3, elapse : 0.291318416595459 [2022/08/10 16:11:03] ppocr DEBUG: rec_res num  : 3, elapse : 1.3992137908935547 省份:天津    价格2000.00 [2022/08/10 16:11:03] ppocr DEBUG: dt_boxes num : 3, elapse : 0.20323419570922852 [2022/08/10 16:11:05] ppocr DEBUG: rec_res num  : 3, elapse : 1.3923869132995605 省份:重庆    价格1750.00 [2022/08/10 16:11:05] ppocr DEBUG: dt_boxes num : 3, elapse : 0.20437145233154297 [2022/08/10 16:11:06] ppocr DEBUG: rec_res num  : 3, elapse : 1.499875545501709 省份:广东    价格2240.00 [2022/08/10 16:11:07] ppocr DEBUG: dt_boxes num : 3, elapse : 0.28789258003234863 [2022/08/10 16:11:08] ppocr DEBUG: rec_res num  : 3, elapse : 1.6108949184417725 省份:浙江    价格2470.00 [2022/08/10 16:11:08] ppocr DEBUG: dt_boxes num : 3, elapse : 0.28465819358825684 [2022/08/10 16:11:10] ppocr DEBUG: rec_res num  : 3, elapse : 1.4023168087005615 省份:江苏    价格1770.00 [2022/08/10 16:11:10] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2079639434814453 [2022/08/10 16:11:12] ppocr DEBUG: rec_res num  : 3, elapse : 1.418123483657837 省份:江西    价格2250.00 [2022/08/10 16:11:12] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2044999599456787 [2022/08/10 16:11:13] ppocr DEBUG: rec_res num  : 3, elapse : 1.408416986465454 省份:安徽    价格2360.00 [2022/08/10 16:11:13] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2003467082977295 [2022/08/10 16:11:15] ppocr DEBUG: rec_res num  : 3, elapse : 1.4108216762542725 省份:河南    价格1905.00 [2022/08/10 16:11:15] ppocr DEBUG: dt_boxes num : 3, elapse : 0.30034303665161133 [2022/08/10 16:11:17] ppocr DEBUG: rec_res num  : 3, elapse : 1.5090062618255615 省份:河北    价格1830.00 [2022/08/10 16:11:17] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2920353412628174 [2022/08/10 16:11:19] ppocr DEBUG: rec_res num  : 3, elapse : 1.4099595546722412 省份:山东    价格2230.00 [2022/08/10 16:11:19] ppocr DEBUG: dt_boxes num : 3, elapse : 0.20354890823364258 [2022/08/10 16:11:20] ppocr DEBUG: rec_res num  : 3, elapse : 1.4975931644439697 省份:福建    价格2070.00 [2022/08/10 16:11:21] ppocr DEBUG: dt_boxes num : 3, elapse : 0.20367145538330078 [2022/08/10 16:11:22] ppocr DEBUG: rec_res num  : 3, elapse : 1.399881362915039 省份:湖南    价格1800.00 [2022/08/10 16:11:22] ppocr DEBUG: dt_boxes num : 3, elapse : 0.28646397590637207 [2022/08/10 16:11:24] ppocr DEBUG: rec_res num  : 3, elapse : 1.4092700481414795 省份:湖北    价格2280.00 [2022/08/10 16:11:24] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2845890522003174 [2022/08/10 16:11:25] ppocr DEBUG: rec_res num  : 3, elapse : 1.402533769607544 省份:广西    价格2280.00 [2022/08/10 16:11:26] ppocr DEBUG: dt_boxes num : 3, elapse : 0.20486736297607422 [2022/08/10 16:11:27] ppocr DEBUG: rec_res num  : 3, elapse : 1.3977165222167969 省份:山西    价格1915.00 [2022/08/10 16:11:27] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2967183589935303 [2022/08/10 16:11:29] ppocr DEBUG: rec_res num  : 3, elapse : 1.7988090515136719 省份:陕西    价格1990.00 [2022/08/10 16:11:29] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2913792133331299 [2022/08/10 16:11:31] ppocr DEBUG: rec_res num  : 3, elapse : 1.5969874858856201 省份:宁夏    价格1700.00 [2022/08/10 16:11:31] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2055673599243164 [2022/08/10 16:11:33] ppocr DEBUG: rec_res num  : 3, elapse : 1.5008113384246826 省份:甘肃    价格1815.00 [2022/08/10 16:11:33] ppocr DEBUG: dt_boxes num : 3, elapse : 0.28537464141845703 [2022/08/10 16:11:34] ppocr DEBUG: rec_res num  : 3, elapse : 1.4073350429534912 省份:新疆    价格1845.00 [2022/08/10 16:11:35] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2010488510131836 [2022/08/10 16:11:36] ppocr DEBUG: rec_res num  : 3, elapse : 1.484731674194336 省份:青海    价格1835.00 [2022/08/10 16:11:36] ppocr DEBUG: dt_boxes num : 3, elapse : 0.20502114295959473 [2022/08/10 16:11:38] ppocr DEBUG: rec_res num  : 3, elapse : 1.3996272087097168 省份:海南    价格1785.00 [2022/08/10 16:11:38] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2883188724517822 [2022/08/10 16:11:39] ppocr DEBUG: rec_res num  : 3, elapse : 1.4016520977020264 省份:贵州    价格1915.00 [2022/08/10 16:11:40] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2922041416168213 [2022/08/10 16:11:41] ppocr DEBUG: rec_res num  : 3, elapse : 1.502861738204956 省份:云南    价格1965.00 [2022/08/10 16:11:41] ppocr DEBUG: dt_boxes num : 3, elapse : 0.2015540599822998 [2022/08/10 16:11:43] ppocr DEBUG: rec_res num  : 3, elapse : 1.3932435512542725 省份:四川    价格2350.00 [2022/08/10 16:11:43] ppocr DEBUG: dt_boxes num : 3, elapse : 0.20165038108825684 [2022/08/10 16:11:44] ppocr DEBUG: rec_res num  : 3, elapse : 1.310579538345337 省份:西藏    价格1785.00 [2022/08/10 16:11:45] ppocr DEBUG: dt_boxes num : 3, elapse : 0.204742431640625 [2022/08/10 16:11:46] ppocr DEBUG: rec_res num  : 3, elapse : 1.399357557296753 省份:内蒙古    价格1765.00 [2022/08/10 16:11:46] ppocr DEBUG: dt_boxes num : 3, elapse : 0.19914031028747559 [2022/08/10 16:11:48] ppocr DEBUG: rec_res num  : 3, elapse : 1.3909227848052979 省份:辽宁    价格1915.00 [2022/08/10 16:11:48] ppocr DEBUG: dt_boxes num : 3, elapse : 0.20081448554992676 [2022/08/10 16:11:49] ppocr DEBUG: rec_res num  : 3, elapse : 1.394876480102539 省份:吉林    价格1735.00
2.3、使用pymysql把数据导入到mysql(受限于这是一个在线的notebook,无法调用本地摄像头或者无法进行鼠标键盘的交互。下面的代码仅供展示作用,不要运行!)

In [1]

    # 打开数据库连接     conn1 = pymysql.connect(host='localhost',                             user='root',                             password='123456',                             database='test_to_feitie')  # 表名     # 使用cursor()方法获取操作游标     cursor = conn1.cursor()     # SQL 更新语句     sql = "insert into test1 values(%s,%s,%s)"     cursor.execute(sql, [all_address[i], "2022-8-08", money_all[i]])  # 录入格式为:省份varchar,时间varchar,价格:int     conn1.commit()     cursor.close()     conn1.close()     print("成功把"+all_address[i]+"今日铁价写入test1中")
2.4.1、使用flask搭建后端。Flask是一个轻量级的可定制框架,使用Python语言编写,较其他同类型框架更为灵活、轻便、安全且容易上手。它可以很好地结合MVC模式进行开发,开发人员分工合作,小型团队在短时间内就可以完成功能丰富的中小型网站或Web服务的实现。另外,Flask还有很强的定制性,用户可以根据自己的需求来添加相应的功能,在保持核心功能简单的同时实现功能的丰富与扩展,其强大的插件库可以让用户实现个性化的网站定制,开发出功能强大的网站。下面是搭建后端的代码。(受限于这是一个在线的notebook,无法调用本地摄像头或者无法进行鼠标键盘的交互。下面的代码仅供展示作用,不要运行!)

In [ ]

from flask import Flask from flask import render_template from flask import jsonify import utils app = Flask(__name__) @app.route('/') def h_1():     return render_template("main.html") @app.route("/c2")  # 搭建c2路由用于获取mysql中的省份名字/价格信息 def get_c2_data():     res = []     for tup in utils.get_c2_data():         res.append({"name":tup[0],"value":int(tup[1])})     return jsonify({"data":res})  # 转化为json格式的数据 @app.route("/l1")  # 搭建l1路由用于获取MySQL中的佛山市所有价格数据 def get_l1_data():     data = utils.get_l1_data()     time,feitie,shengtie = [],[],[]     for a,b,c in data[:]:         time.append(a)         feitie.append(b)         shengtie.append(c)     return jsonify({"time":time,"feitie":feitie,"shengtie":shengtie}) if __name__ == '__main__':     app.run()
2.4.2、使用pymysql获取保存的数据(受限于这是一个在线的notebook,无法调用本地摄像头或者无法进行鼠标键盘的交互。下面的代码仅供展示作用,不要运行!)

In [ ]

import pymysql def get_conn():     # 打开数据库连接     conn = pymysql.connect(host='localhost',                            user='root',                            password='123456',                            database='test_to_feitie')     # 使用cursor()方法获取操作游标     cursor = conn.cursor()     return conn, cursor def close_conn(conn,cursor):     cursor.close()     conn.close() def query(sql,*args):     conn, cursor = get_conn()     cursor.execute(sql,args)     res = cursor.fetchall()     close_conn(conn, cursor)     return res def get_c2_data():     # sql = "select address,money from test1"     sql = "select address,money from test1 where(times="2022-8-08")"     res = query(sql)     return res def get_l1_data():     sql = "select time,feitie,shengtie from foshan_test1"     res = query(sql)     return res if __name__ == "__main__":     print(get_l1_data())

以上就是使用paddleOCR完成价格提取并实现可视化的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月25日 13:44:12
下一篇 2025年11月25日 13:45:30

相关推荐

  • 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
  • 为什么自定义样式表在 Safari 中访问百度时无效?

    自定义样式表在 Safari 中无效的问题 你在 Safari 偏好设置中自定义的样式表无法在某些网站(例如百度)上生效,这是为什么呢? 原因在于,你创建的样式表应用于本地文件路径,而百度是一个远程网站,位于互联网上。 在访问本地项目时,文件协议(file://)会允许你访问本地计算机上的文件。所以…

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

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

    2025年12月24日
    000
  • 为什么自定义样式表在 Safari 中访问百度页面时无法生效?

    自定义样式表在 safari 中失效的原因 用户尝试在 safari 偏好设置中添加自定义样式表,代码如下: body { background-image: url(“/users/luxury/desktop/wallhaven-o5762l.png”) !important;} 测试后发现,在…

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

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

    2025年12月24日
    200

发表回复

登录后才能评论
关注微信