Edge浏览器怎么使用沉浸式阅读器更改页面底色为护眼绿豆沙_Edge浏览器背景更换

轻丽同学_4508

轻丽同学_4508

2026-05-21

788人浏览

原创

可通过edge沉浸式阅读器设置绿豆沙色(#c7edcc)背景实现护眼效果,支持手动配置、默认固化、css注入、flags实验功能及stylus扩展五种方法,分别适用于临时使用、高频阅读、常规页面覆盖、底层渲染干预和跨会话持久化场景。

edge浏览器怎么使用沉浸式阅读器更改页面底色为护眼绿豆沙_edge浏览器背景更换

如果您在Edge浏览器中打开网页时希望将默认白色背景替换为医学推荐的护眼绿豆沙色(#C7EDCC),可通过沉浸式阅读器功能实现局部或全局底色替换。该模式专为降低视觉疲劳设计,支持自定义背景色、字体与行距,且不依赖第三方扩展。以下是多种独立生效的操作路径:

一、启用沉浸式阅读器并手动设置绿豆沙背景

沉浸式阅读器剥离网页杂项元素,仅保留正文内容,并提供原生背景色调节入口,适用于单页临时护眼需求,无需安装插件或修改系统设置。

1、在Edge中打开任意支持沉浸式阅读器的网页(如新闻、博客、PDF内嵌页面)。

2、点击地址栏右侧的书本图标(沉浸式阅读器),或按快捷键 Ctrl+Shift+R 启动该模式。

3、页面进入极简阅读界面后,点击顶部工具栏中的“外观”按钮(调色板图标)。

4、在“页面颜色”下拉菜单中选择“自定义颜色”,弹出颜色选择器。

5、在十六进制输入框中直接填入 #C7EDCC,确认后全文背景即时变为标准绿豆沙色。

6、同步调整“文本颜色”为 #333333,确保文字对比度符合护眼要求。

Edge浏览器怎么使用沉浸式阅读器更改页面底色为护眼绿豆沙_Edge浏览器背景更换

二、通过沉浸式阅读器首选项实现自动触发与默认底色固化

此方法将绿豆沙色设为沉浸式阅读器的永久默认背景,每次启动该模式均自动应用,避免重复设置,适用于高频阅读用户。

1、确保已开启沉浸式阅读器(若未显示书本图标,可先访问 edge://settings/appearance,确认“沉浸式阅读器”未被禁用)。

2、在任意网页中启动沉浸式阅读器,点击右上角“更多选项”(三个点)→“阅读偏好设置”。

3、在“页面颜色”区域点击“自定义颜色”,输入 #C7EDCC 并保存。

4、勾选“对所有网站启用沉浸式阅读器”选项,使书本图标在兼容页面始终可见。

5、关闭设置页,重启Edge浏览器,验证下次进入沉浸式阅读器时是否自动加载绿豆沙背景。

Edge浏览器怎么使用沉浸式阅读器更改页面底色为护眼绿豆沙_Edge浏览器背景更换

三、结合CSS注入实现沉浸式阅读器外的全局网页底色覆盖

沉浸式阅读器仅作用于其自身界面,无法影响常规浏览状态下的网页背景;本方案通过Edge开发者工具临时注入CSS,强制将当前页面body及根容器背景统一设为#C7EDCC,适用于需长期保持护眼色但暂不切换阅读模式的场景。

1、在目标网页按 F12 打开开发者工具,切换至“控制台”(Console)标签页。

2、粘贴以下代码并回车执行:
document.body.style.backgroundColor = '#C7EDCC'; document.documentElement.style.backgroundColor = '#C7EDCC';

Gcore FastEdge
Gcore FastEdge

用于构建、编译或部署 WebAssembly HTTP 应用到 Gcore FastEdge 边缘计算——触发关键词为“deploy to FastEdge”“build a FastEdge app”“Wasm on the edge”“Gcore edge function”、上传 .wasm 文件或使用 fastedge Rust SDK。

下载

3、若页面含iframe内容,补充执行:
document.querySelectorAll('iframe').forEach(i => { try { i.contentDocument.body.style.backgroundColor = '#C7EDCC'; } catch(e) {} });

4、为防止滚动条残留白色,追加:
document.body.style.scrollbarColor = '#C7EDCC #E0F0E0';

5、刷新页面后,该CSS注入失效;如需持久化,须配合扩展(如Stylus)或flags实验功能。

Edge浏览器怎么使用沉浸式阅读器更改页面底色为护眼绿豆沙_Edge浏览器背景更换

四、利用Edge实验性Flags启用强制深色渲染并叠加豆沙绿滤镜

此路径绕过沉浸式阅读器限制,通过底层渲染层干预,使网页在常规浏览状态下即呈现低刺激色调;配合滤镜参数微调,可逼近绿豆沙色视觉效果,兼容性高于纯CSS注入。

1、在地址栏输入 edge://flags/#enable-force-dark 并回车。

2、将“Force Dark Mode”设为 Enabled with selective inversion of non-image elements。

3、在同页面搜索关键词 Web Content Custom Color Scheme,启用该实验项。

4、重启浏览器后,进入 edge://settings/appearance,找到“沉浸式阅读器”设置区,点击“自定义颜色”旁的“高级设置”链接。

5、在弹出面板中启用“使用自定义配色方案覆盖网页”,将背景色值设为 #C7EDCC,文字色设为 #333333。

五、安装Stylus扩展实现跨页面、跨会话的沉浸式阅读器风格延续

Stylus作为轻量级用户样式管理器,可在常规浏览与沉浸式阅读器两种状态下分别部署CSS规则,确保无论是否启用阅读模式,正文区域始终维持#C7EDCC底色,且不影响广告、表单等交互元素原有样式。

1、访问 edge://extensions/,开启右上角“开发者模式”。

2、前往 Microsoft Edge 加载项官网,搜索并安装 Stylus(官方认证,评分4.7+)。

3、安装完成后点击扩展图标 → “管理样式” → “写新样式”。

4、在“适用网址”中填写 https?://*,确保覆盖所有HTTP/HTTPS网页。

5、在CSS编辑区粘贴以下代码:
body, html, .ir-body { background-color: #C7EDCC !important; color: #333333 !important; } ::-webkit-scrollbar-track { background: #D9EAD3 !important; } ::-webkit-scrollbar-thumb { background: #A8C9A0 !important; }

6、点击“保存”,刷新任意网页,验证正文背景是否稳定呈现绿豆沙色且滚动条协调一致。

相关文章

Edge浏览器
Edge浏览器

Edge浏览器是由Microsoft(微软中国)官方推出的全新一代手机浏览器。Edge浏览器内置强大的搜索引擎,一站搜索全网,搜文字、搜图片,快速识别,帮您找到想要的内容。有需要的小伙伴快来保存下载体验吧!

下载

相关标签:

浏览器 edge edge浏览器

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.21

2802

5

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.03.05

2294

4

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

2025.04.24

2692

6

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

140

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

80

15

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

2026.09.23

60

15

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

2026.09.22

40

12

Conan二进制包配置指南
Conan二进制包配置指南

本专题介绍Conan根据操作系统、编译器、架构和构建类型生成二进制包的方法,讲解Profile、Settings、Options及Package ID的作用,帮助管理不同平台和编译环境下的包版本。

2026.09.22

60

13

Conan私有仓库搭建教程
Conan私有仓库搭建教程

本专题系统的讲解Conan私有仓库的搭建流程,涵盖仓库服务部署、存储目录配置、用户认证、权限划分和远程地址添加,并介绍内部C++依赖包的上传、下载及版本维护方法。

2026.09.22

40

19

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
phpMyAdmin 常见问题
phpMyAdmin 常见问题

共0课时 | 0人学习

uni-app快速上手
uni-app快速上手

共0课时 | 0人学习