为什么我的网站在HTTPS下样式加载不正常？

星星（打工版）提问于 2026-02-24 22:57:18 阅读 115

前端

我刚把网站从HTTP迁移到HTTPS，结果发现部分CSS样式没生效，控制台还报混合内容（Mixed Content）警告。我检查了所有资源链接，但还是搞不清哪里出问题了。

比如下面这段CSS，本地开发时完全正常，但部署到HTTPS环境后，背景图就加载不了：

.hero {
  background-image: url('http://cdn.example.com/bg.jpg');
  background-size: cover;
  height: 100vh;
}

是不是因为CSS里用了HTTP的绝对路径？该怎么改才能兼容HTTPS？

我来解答赞 6 收藏

反馈

1 条解答

一书娟 Lv1

对，就是这个问题，浏览器禁止HTTPS页面加载HTTP资源，我之前这样搞的：把URL改成协议相对路径或者直接用HTTPS。

把那行改成这样就行：

.hero {
background-image: url('//cdn.example.com/bg.jpg');
background-size: cover;
height: 100vh;
}

或者更稳妥点，直接写死HTTPS：

.hero {
background-image: url('https://cdn.example.com/bg.jpg');
background-size: cover;
height: 100vh;
}

记得检查下其他地方有没有硬编码的HTTP链接，比如HTML里的img、script、link标签，还有JS里动态加载的资源，全改掉就稳了。

2026-02-24 23:03