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

作者站长头像
站长
· 阅读数 13

今天发现 Safari 偏好设置里可以设置自定义样式表为什么我的自定义样式表在Safari中不能正常工作?于是我自己写了个 css 代码进行测试

body {
    background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}

测试结果如下(有对应的网页检查器结果):

  1. 自己写的网页,可以生效为什么我的自定义样式表在Safari中不能正常工作?
  2. baidu 页面,无法生效为什么我的自定义样式表在Safari中不能正常工作?我是一个前端新手,请问下这是什么原因?
回复
1个回答
avatar
test
2024-06-24

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

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