GitHub Pages部署时header背景图自动设为none CSS不生效问题

DevOps 小满

2026-9-2

问题根因

渲染代码里出现的bis_skin_checked属性和行内样式background-image: none不是GitHub Pages自动添加的，是浏览器安装的广告拦截类扩展（常见于各类国产广告拦截插件、带页面元素过滤功能的浏览器防护工具）注入的：

这类插件会遍历页面DOM，给检测过的元素加上bis_skin_checked标记判断是否为广告位
插件误判id为header的模块是顶部广告横幅，自动注入行内样式清除背景图
行内样式优先级高于外部CSS文件的规则，直接覆盖了你在main.css里写的背景配置
GitHub Pages只会原样部署你上传的静态文件，不会修改页面代码，右键查看网页原始源代码（不是开发者工具的Elements面板）就能确认线上部署的原始代码没有这部分注入内容

解决方法

禁用浏览器所有广告拦截、页面元素修改类扩展，刷新页面即可恢复正常
本地调试时使用浏览器无痕/隐私模式打开页面，该模式默认不加载用户安装的第三方扩展，能看到和线上访问一致的真实渲染效果
若要避免其他安装同类插件的访问者遇到同样问题，可以给背景图规则提升优先级，覆盖插件注入的行内样式：

/* Header */
#header {
    position: relative;
    background-image: url("../images/114645.jpg") !important;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
    padding: 7.5em 0 2em 0;
    cursor: default;
}