飞桨常规赛:PALM眼底彩照视盘探测与分割 – 8月第2名方案

飞桨常规赛:PALM眼底彩照视盘探测与分割

常规赛简介

飞桨(PaddlePaddle)以百度多年的深度学习技术研究和业务应用为基础,是中国首个开源开放、技术领先、功能完备的产业级深度学习平台。更多飞桨资讯,点击此处查看。

飞桨常规赛由百度飞桨于 2019 年发起,面向全球 AI 开发者,赛题范围广,涵盖领域多。常规赛旨在通过长期发布的经典比赛项目,为开发者提供学习锻炼机会,助力大家在飞桨大赛中获得骄人成绩。

参赛选手需使用飞桨框架,基于特定赛题下的真实行业数据完成并提交任务。常规赛采取月度评比方式,为打破历史最高记录选手和当月有资格参与月度评奖的前 10 名选手提供飞桨特别礼包奖励。更多惊喜,更多收获,尽在飞桨常规赛。

赛题介绍 本赛题原型为ISBI2019PALM眼科大赛。 近视已成为全球公共卫生负担。在近视患者中,约35%为高度近视。近视导致眼轴长度的延长,可能引起视网膜和脉络膜的病理改变。随着近视屈光度的增加,高度近视将发展为病理性近视,其特点是病理改变的形成:(1)后极,包括镶嵌型眼底、后葡萄肿、视网膜脉络膜变性等;(2)视盘,包括乳头旁萎缩、倾斜等;(3)近视性黄斑,包括漆裂、福氏斑、CNV等。病理性近视对患者造成不可逆的视力损害。因此,早期诊断和定期随访非常重要。

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

飞桨常规赛:PALM眼底彩照视盘探测与分割 - 8月第2名方案 - 创想鸟        

视网膜由黄斑向鼻侧约3mm处有一直径约1.5mm、境界清楚的淡红色圆盘状结构,称为视神经盘,简称视盘。视盘是眼底图像的一个重要特征,对其进行准确、快速地定位与分割对利用眼底图像进行疾病辅助诊断具有重要意义。

比赛任务

该任务目的是对眼底图像的视盘进行检测,若存在视盘结构,需从眼底图像中分割出视盘区域;若无视盘结构,分割结果直接置全背景。飞桨常规赛:PALM眼底彩照视盘探测与分割 - 8月第2名方案 - 创想鸟        

数据集介绍

本次常规赛提供的金标准由中山大学中山眼科中心的7名眼科医生手工进行视盘像素级标注,之后由另一位高级专家将它们融合为最终的标注结果。存储为BMP图像,与对应的眼底图像大小相同,标签为0代表视盘(黑色区域);标签为255代表其他(白色区域)。

训练数据集

文件名称:Train Train文件夹里有fundus_images文件夹和Disc_Masks文件夹。

fundus_images文件夹内包含800张眼底彩照,分辨率为1444×1444,或2124×2056。命名形如H0001.jpg、N0001.jpg、P0001.jpg和V0001.jpg。

Disc_Masks文件夹内包含fundus_images里眼底彩照的视盘分割金标准,大小与对应的眼底彩照一致。命名前缀和对应的fundus_images文件夹里的图像命名一致,后缀为bmp。

测试数据集

文件名称:PALM-Testing400-Images

包含400张眼底彩照,命名形如T0001.jpg。

数据集下载:

常规赛:PALM眼底彩照视盘探测与分割数据集

小鸽子助手 小鸽子助手

一款集成于WPS/Word的智能写作插件

小鸽子助手 55 查看详情 小鸽子助手

比赛思路

看到语义分割就应该想到PaddleSeg套件啦!可对照PaddleSeg代码解读项目搭建自己的项目

先用Unet进行分割。对预测结果进行处理。

进行分割结果孔洞填充

假如某一张图片预测的结果出现多个不连通的区域,通过面积筛选,只保留最大的面积。(可提升一点dice)

PLAM_model_4成绩为:0.94979

一、数据准备

1.11、解压数据集

In [ ]

#解压数据!unzip -o data/data86770/seg.zip -d /home/aistudio/work

   

1.2、划分数据集

In [ ]

import randomimport osrandom.seed(2021)mask_dir  = '/home/aistudio/work/seg/Train/masks'img_dir = '/home/aistudio/work/seg/Train/fundus_image'path_list = list()for img in os.listdir(img_dir):    img_path = os.path.join(img_dir,img)    mask_path = os.path.join(mask_dir,img.replace('jpg', 'png'))    path_list.append((img_path, mask_path))random.shuffle(path_list)ratio = 0.8train_f = open('/home/aistudio/work/seg/Train/train.txt','w') val_f = open('/home/aistudio/work/seg/Train/val.txt' ,'w')for i ,content in enumerate(path_list):    img, mask = content    text = img + ' ' + mask + 'n'    if i < len(path_list) * ratio:        train_f.write(text)    else:        val_f.write(text)train_f.close()val_f.close()

   

1.3、导入依赖项

In [ ]

!pip install paddleseg

   In [ ]

#导入常用的库import osimport randomimport numpy as npfrom random import shuffleimport cv2import paddlefrom PIL import Imageimport shutilimport refrom paddle.vision.transforms import functional as Fimport os.path

   

二、网络训练

2.1 数据增强

In [ ]

import paddleseg.transforms as Tfrom paddleseg.datasets import OpticDiscSeg,Datasettrain_transforms = [    T.RandomHorizontalFlip(),# 水平翻转    T.RandomVerticalFlip(),# 垂直翻转    T.RandomDistort(0.4),# 随机扭曲    T.RandomBlur(0.3),# 高斯模糊    T.RandomScaleAspect(min_scale=0.5,aspect_ratio=0.5),# 随机缩放    T.Resize(target_size=(512,512)),    T.Normalize()  # 图像标准化]val_transforms = [    T.Resize(target_size=(512,512)),    T.Normalize()]

   

2.2 构建训练集与验证集

In [ ]

dataset_root = '/home/aistudio/work/seg/Train'train_path  = '/home/aistudio/work/seg/Train/train.txt'val_path  = '/home/aistudio/work/seg/Train/val.txt'# 构建训练集train_dataset = Dataset(    dataset_root=dataset_root,    train_path=train_path,    transforms=train_transforms,    num_classes=2,    mode='train'                  )#验证集val_dataset = Dataset(    dataset_root=dataset_root,    val_path=val_path,    transforms=val_transforms,    num_classes=2,    mode='val'                  )

   

2.3 训练配置

学习率:余弦退火策略(CosineAnnealingDecay)

class paddle.optimizer.lr. CosineAnnealingDecay ( learning_rate, T_max, eta_min=0, last_epoch=- 1, verbose=False )

参数:

learning_rate (float) – 初始学习率。T_max (float|int) – 训练的上限轮数,是余弦衰减周期的一半。eta_min (float|int, 可选) – 学习率的最小值。默认值为0。last_epoch (int,可选) – 上一轮的轮数,重启训练时设置为上一轮的epoch数。默认值为 -1,则为初始学习率。verbose (bool,可选) – 如果是 True ,则在每一轮更新时在标准输出 stdout 输出一条信息。默认值为 False 。

返回:用于调整学习率的 CosineAnnealingDecay 实例对象。

优化器:Adam

class paddle.optimizer. Adam ( learning_rate=0.001, beta1=0.9, beta2=0.999, epsilon=1e-08, parameters=None, weight_decay=None, grad_clip=None, name=None, lazy_mode=False )

参数:

learning_rate (float|_LRScheduler) – 学习率,用于参数更新的计算。可以是一个浮点型值或者一个_LRScheduler类,默认值为0.001beta1 (float|Tensor, 可选) – 一阶矩估计的指数衰减率,是一个float类型或者一个shape为[1],数据类型为float32的Tensor类型。默认值为0.9beta2 (float|Tensor, 可选) – 二阶矩估计的指数衰减率,是一个float类型或者一个shape为[1],数据类型为float32的Tensor类型。默认值为0.999epsilon (float, 可选) – 保持数值稳定性的短浮点类型值,默认值为1e-08parameters (list, 可选) – 指定优化器需要优化的参数。在动态图模式下必须提供该参数;在静态图模式下默认值为None,这时所有的参数都将被优化。weight_decay (float|WeightDecayRegularizer,可选) – 正则化方法。可以是float类型的L2正则化系数或者正则化策略: cn_api_fluid_regularizer_L1Decay 、 cn_api_fluid_regularizer_L2Decay 。如果一个参数已经在 ParamAttr 中设置了正则化,这里的正则化设置将被忽略; 如果没有在 ParamAttr 中设置正则化,这里的设置才会生效。默认值为None,表示没有正则化。grad_clip (GradientClipBase, 可选) – 梯度裁剪的策略,支持三种裁剪策略: paddle.nn.ClipGradByGlobalNorm 、 paddle.nn.ClipGradByNorm 、 paddle.nn.ClipGradByValue 。 默认值为None,此时将不进行梯度裁剪。name (str, 可选)- 该参数供开发人员打印调试信息时使用,具体用法请参见 Name ,默认值为Nonelazy_mode (bool, 可选) – 设为True时,仅更新当前具有梯度的元素。官方Adam算法有两个移动平均累加器(moving-average accumulators)。累加器在每一步都会更新。在密集模式和稀疏模式下,两条移动平均线的每个元素都会更新。如果参数非常大,那么更新可能很慢。 lazy mode仅更新当前具有梯度的元素,所以它会更快。但是这种模式与原始的算法有不同的描述,可能会导致不同的结果,默认为FalseIn [ ]

import paddlefrom paddleseg.models import UNetfrom paddleseg.models import OCRNetfrom paddleseg.models.losses import CrossEntropyLoss,DiceLoss, MixedLossbase_lr =0.001iters = 16000 unet_model = UNet(num_classes=2,pretrained='/home/aistudio/output/PLAM_model_3/best_model/model.pdparams')#使用预训练模型unet进行训练# unet_model = UNet(num_classes=2)#使用unet进行训练#自动调整学习率lr =paddle.optimizer.lr.CosineAnnealingDecay(base_lr, T_max=(iters // 3), last_epoch=0.5)u_optimizer = paddle.optimizer.Adam(lr, parameters=unet_model.parameters())mixtureLosses = [CrossEntropyLoss(),DiceLoss() ]mixtureCoef = [0.7,0.3]losses = {}losses['types'] = [MixedLoss(mixtureLosses, mixtureCoef)]losses['coef'] = [1]

   

2.4 开始训练

In [ ]

#进行训练from paddleseg.core import traintrain(    model = unet_model,    train_dataset=train_dataset,    val_dataset=val_dataset,    optimizer=u_optimizer,    save_dir='output/PLAM_model_4',    iters=iters,      batch_size=4,     save_interval=480,    log_iters=10,    num_workers=0,    losses=losses,    use_vdl=True    )

   

2.5 模型验证

In [ ]

from paddleseg.core import evaluatemodel = UNet(num_classes=2)#换自己保存的模型文件model_path = 'output/PLAM_model_4/best_model/model.pdparams'para_state_dict = paddle.load(model_path)model.set_dict(para_state_dict)evaluate(model,val_dataset)

   

三、结果预测

3.1 生成test.txt文件

In [ ]

%cd ~import randomimport ostest_path = r"work/seg/test"test_lst=[]for test in os.listdir(test_path):                  test_lst.append(test)  with open('work/seg/test.txt', 'w') as f:    for line in test_lst:        f.write(line)        f.write('n')

   

3.2 预测分割

PLAM_model_2、PLAM_model_3、PLAM_model_4这三个模型皆可达到0.94+

In [ ]

from paddleseg.core import predictimport paddleseg.transforms as pttransforms = pt.Compose([    pt.Resize(target_size=(512, 512)),    pt.Normalize()])model = UNet(num_classes=2)#生成图片列表image_list = []with open('work/seg/test.txt' ,'r') as f:    for line in f.readlines():        image_list.append(os.path.join('work/seg/test/',line.split()[0]))predict(        model,        #换自己保存的模型文件        model_path = 'output/PLAM_model_4/best_model/model.pdparams',        transforms=transforms,        image_list=image_list,        save_dir='results',    )

   

3.3 生成结果

将分割结果二值化,超过127则为255(白色区域),小于 127则为0(黑色区域)In [ ]

!mkdir /home/aistudio/newimport os import cv2result_path = '/home/aistudio/results/pseudo_color_prediction'dist_path = '/home/aistudio/new'for img_name in os.listdir(result_path):    img_path = os.path.join(result_path, img_name)    img = cv2.imread(img_path)    g  = img[:,:,1]    ret, result = cv2.threshold(g, 127,255, cv2.THRESH_BINARY_INV)    cv2.imwrite(os.path.join(dist_path,img_name), result)

   将分割结果0-255翻转,并填充孔洞In [ ]

import cv2import osimport numpy as np'''图像说明:图像为二值化图像,255白色为目标物,0黑色为背景要填充白色目标物中的黑色孔洞'''def FillHole_1(imgPath,SavePath):    im_in = cv2.imread(imgPath, cv2.IMREAD_GRAYSCALE);    th, im_th = cv2.threshold(im_in, 220, 255, cv2.THRESH_BINARY_INV);    im_floodfill = im_th.copy()    h, w = im_th.shape[:2]    mask = np.zeros((h+2, w+2), np.uint8)    cv2.floodFill(im_floodfill, mask, (0,0), 255);    im_floodfill_inv = cv2.bitwise_not(im_floodfill)    im_out = im_th | im_floodfill_inv    cv2.imwrite(SavePath, im_out)def FillHole_2(imgPath,SavePath):    im_in = cv2.imread(imgPath, cv2.IMREAD_GRAYSCALE);    # 复制 im_in 图像    im_floodfill = im_in.copy()    # Mask 用于 floodFill,官方要求长宽+2    h, w = im_in.shape[:2]    mask = np.zeros((h+2, w+2), np.uint8)    # floodFill函数中的seedPoint必须是背景    isbreak = False    for i in range(im_floodfill.shape[0]):        for j in range(im_floodfill.shape[1]):            if(im_floodfill[i][j]==255):                seedPoint=(i,j)                isbreak = True                break        if(isbreak):            break    # 得到im_floodfill    cv2.floodFill(im_floodfill, mask, seedPoint, 0);    # 得到im_floodfill的逆im_floodfill_inv    im_floodfill_inv = cv2.bitwise_not(im_floodfill)    # 把im_in、im_floodfill_inv这两幅图像结合起来得到前景    im_out = im_in | im_floodfill    cv2.imwrite(SavePath, im_out)result_path = 'new'dist_path = 'new'for img_name in os.listdir(result_path):    img_path = os.path.join(result_path, img_name)    SavePath = os.path.join(dist_path, img_name)    FillHole_1(img_path,SavePath)    FillHole_2(img_path,SavePath)

   

假如预测中出现多个不连通的区域,只保留最大的区域

参考吖吖查大佬的:飞桨常规赛:PALM眼底彩照视盘探测与分割 2021 5月第1名方案

In [ ]

!mkdir /home/aistudio/Disc_Segmentationimport os import cv2import matplotlib.pyplot as pltdef cnt_area(cnt):    area = cv2.contourArea(cnt)    return arearesult_path = '/home/aistudio/new'dist_path = '/home/aistudio/Disc_Segmentation'for img_name in os.listdir(result_path):    img_path = os.path.join(result_path, img_name)    img = cv2.imread(img_path)    g  = img[:,:,1]    ret, threshold = cv2.threshold(g, 127,255, cv2.THRESH_BINARY)    contours, hierarch = cv2.findContours(threshold, cv2.RETR_LIST, cv2.CHAIN_APPROX_NONE)    contours.sort(key=cnt_area, reverse=True)    if len(contours) > 1:        for i in range(1,len(contours)):            cv2.drawContours(threshold, [contours[i]], 0, 0, -1)    _,result = cv2.threshold(threshold, 127, 255, cv2.THRESH_BINARY_INV)    cv2.imwrite(os.path.join(dist_path, img_name), result)

   

结果打包

将结果打包,下载皆可提交:提交

In [ ]

# 压缩当前路径所有文件,输出zip文件path='Disc_Segmentation'import zipfile,oszipName = 'Disc_Segmentation.zip' #压缩后文件的位置及名称f = zipfile.ZipFile( zipName, 'w', zipfile.ZIP_DEFLATED )for dirpath, dirnames, filenames in os.walk(path):    for filename in filenames:        print(filename)        f.write(os.path.join(dirpath,filename))f.close()

   

以上就是飞桨常规赛:PALM眼底彩照视盘探测与分割 – 8月第2名方案的详细内容,更多请关注创想鸟其它相关文章!

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

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

相关推荐

  • 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
  • 旋转长方形后,如何计算其相对于画布左上角的轴距?

    绘制长方形并旋转,计算旋转后轴距 在拥有 1920×1080 画布中,放置一个宽高为 200×20 的长方形,其坐标位于 (100, 100)。当以任意角度旋转长方形时,如何计算它相对于画布左上角的 x、y 轴距? 以下代码提供了一个计算旋转后长方形轴距的解决方案: const x = 200;co…

    2025年12月24日
    000
  • 旋转长方形后,如何计算它与画布左上角的xy轴距?

    旋转后长方形在画布上的xy轴距计算 在画布中添加一个长方形,并将其旋转任意角度,如何计算旋转后的长方形与画布左上角之间的xy轴距? 问题分解: 要计算旋转后长方形的xy轴距,需要考虑旋转对长方形宽高和位置的影响。首先,旋转会改变长方形的长和宽,其次,旋转会改变长方形的中心点位置。 求解方法: 计算旋…

    2025年12月24日
    000
  • 旋转长方形后如何计算其在画布上的轴距?

    旋转长方形后计算轴距 假设长方形的宽、高分别为 200 和 20,初始坐标为 (100, 100),我们将它旋转一个任意角度。根据旋转矩阵公式,旋转后的新坐标 (x’, y’) 可以通过以下公式计算: x’ = x * cos(θ) – y * sin(θ)y’ = x * …

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

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

    2025年12月24日
    000
  • 如何计算旋转后长方形在画布上的轴距?

    旋转后长方形与画布轴距计算 在给定的画布中,有一个长方形,在随机旋转一定角度后,如何计算其在画布上的轴距,即距离左上角的距离? 以下提供一种计算长方形相对于画布左上角的新轴距的方法: const x = 200; // 初始 x 坐标const y = 90; // 初始 y 坐标const w =…

    2025年12月24日
    200
  • CSS元素设置em和transition后,为何载入页面无放大效果?

    css元素设置em和transition后,为何载入无放大效果 很多开发者在设置了em和transition后,却发现元素载入页面时无放大效果。本文将解答这一问题。 原问题:在视频演示中,将元素设置如下,载入页面会有放大效果。然而,在个人尝试中,并未出现该效果。这是由于macos和windows系统…

    2025年12月24日
    200
  • 为什么 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
  • 如何计算旋转后的长方形在画布上的 XY 轴距?

    旋转长方形后计算其画布xy轴距 在创建的画布上添加了一个长方形,并提供其宽、高和初始坐标。为了视觉化旋转效果,还提供了一些旋转特定角度后的图片。 问题是如何计算任意角度旋转后,这个长方形的xy轴距。这涉及到使用三角学来计算旋转后的坐标。 以下是一个 javascript 代码示例,用于计算旋转后长方…

    2025年12月24日
    000
  • 为什么我的 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

发表回复

登录后才能评论
关注微信