为什么我的自定义样式表在Safari中不能正常工作?-灵析社区

biubiuuuuu

今天发现 Safari 偏好设置里可以设置自定义样式表 ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241108/67bf1c8cc2a64c576664f074ad023d84.png) 于是我自己写了个 css 代码进行测试 body { background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important; } 测试结果如下(有对应的网页检查器结果): 1. 自己写的网页,可以生效 ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241108/f4bf694a6b50d0666f780782b739bd7b.png) 2. baidu 页面,无法生效 ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241108/0aec13661b29439a18440b3177de3ea6.png) 我是一个前端新手,请问下这是什么原因?

阅读量:14

点赞量:0

问AI
第一个你访问的自己项目,用的是file协议,所以可以应用到你的本地目录中的图片文件。 第二个你访问的百度,用的是http协议,但是你期望使用本地目录中的图片作为背景图片,这样是无法应用上的。 算是一个网页开发的基础就是尽量不要使用file协议来访问项目(临时应急除外),还有就是就是不要使用本地文件目录地址来作为引用地址。 因为很多时候我们会把网页部署到服务器中,这个时候你设置的 "background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png")" 其实会被浏览器解析为 "background-image: url("http://www.baidu.com/Users/luxury/Desktop/wallhaven-o5762l.png")" 很明显服务器上不会有这样的一个文件,也不会有这样的文件目录。自然没办法正确载入需要的背景图。但是样式还是会被正确应用的,只不过图片资源再加载的时候会返回404。这点可以在devTools 的 network 面板中看到。 *** Edit 补充一下,因为你使用的是 "user style sheet" 所以我不是很确定safari单独做了处理来确保可以引入本地文件。 你可以尝试一下把 "background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;" 修改为 "background: #ffbebe url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;",看看是否能够应用上。