为什么我的自定义样式表在Safari中不能正常工作?
今天发现 Safari 偏好设置里可以设置自定义样式表于是我自己写了个 css 代码进行测试
body {
background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}
测试结果如下(有对应的网页检查器结果):
- 自己写的网页,可以生效
- baidu 页面,无法生效
我是一个前端新手,请问下这是什么原因?

第一个你访问的自己项目,用的是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;
,看看是否能够应用上。

- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容