新标签页添加背景图片（转载）断网也可以打开的新标签页

要说火狐自带主页好处那就是即使断网也可以打开，不会像别的什么扩展第三方主页断网就失效了或者地址栏有提示什么的bug。




缘起


用的firefox浏览器，但是原生的新标签页自定义不支持添加背景图片。相比之下，chrome和edge都支持给新标签页自定义背景图片。因此我研究了一下，在superuser上找到了修改新标签页背景图片的方法。
How do I change the background image of Home page in Firefox?
superuser.com/questions/1495946/how-do-i-change-the-background-image-of-home-page-in-firefox
不过直接使用这里面的CSS的效果并不好，所以我修改了一下CSS，在图片上叠加了一层半透明黑色的径向渐变，以降低其亮度，使页面看起来更美观，还把火狐的logo给去掉了……效果如图。[p][p]效果[/p][/p]





步骤


一、在地址栏进输入about:profiles 回车访问。打开默认配置文件的根目录。[p][p]通过about:profiles打开默认配置文件的根目录[/p][/p]
二、在这个目录下新建一个名为 chrome 的文件夹（说起来居然要起名为chrome啊……）[p][p]新建一个名为chrome的文件夹[/p][/p]
三、将背景图片放入新建的 chrome 文件夹中，并新建文本文件，重命名为 userContent.css [p][p]新建userContent.css与放入背景图片[/p][/p]
四、修改 userContent.css 的内容并保存。注意这里面的 img.jpg 要替换成你的背景图片的文件名……

@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing) {
    .top-site-button .title, .context-menu-button {
        color: #fff !important ;
        text-shadow: 2px 2px 2px #222 !important ;
    }
     
    .logo-and-wordmark {
        display: none !important;
    }
 
    body {
        --newtab-topsites-outer-card-hover:rgba(255, 255, 255, 0.4) !important;
        --newtab-element-hover-color: rgba(255, 255, 255, 0.3) !important;
    }
 
    body::before {
        content: "" ;
        z-index: -1 ;
        position: fixed ;
        top: 0 ;
        left: 0 ;
        background:radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.75)), no-repeat url(img.jpg) center ;
        background-size: cover ;
        width: 100vw ;
        height: 100vh ;
    }
}

五、访问about:config，搜索toolkit.legacyUserProfileCustomizations.stylesheets并将其改为 true [p][/p]
六、重启firefox即可。

---

css的解释

.top-site-button .title, .context-menu-button {
    color: #fff !important ;
    text-shadow: 2px 2px 2px #222 !important ;
}

这一段用来将字体颜色改为白色

.logo-and-wordmark {
    display: none !important;
}

这一段用来移除logo

body {
    --newtab-topsites-outer-card-hover:rgba(255, 255, 255, 0.4) !important;
    --newtab-element-hover-color: rgba(255, 255, 255, 0.3) !important;
}

这一段修改了当鼠标移动到网页图标上时显示的方框的颜色，如图[p][p]颜色变成了半透明的白色[/p][/p]

body::before {
    content: "" ;
    z-index: -1 ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    background:radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.75)), no-repeat url(img.jpg) center ;
    background-size: cover ;
    width: 100vw ;
    height: 100vh ;
}

这一段就是修改背景图片啦
radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.75))在图片上叠加了一个中心渐变，不然原图是要亮很多的，图片太花了会导致看不清前面的网页按钮

吐槽


作为写后端的，完全不擅长用F12调试工具……
修改的CSS没有生效怎么办？ !important一把梭！




转载原文：给Firefox的新标签页添加背景图片的方法

@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing) {
/*------移除log-------*/    
    .logo-and-wordmark {
        display: none !important;
    }
/*------快捷方式整体左右边距-------*/
 .body-wrapper{margin-left: 1100px !important;margin-right: -500px !important}
/*------快捷方式按钮颜色和描边-------*/
.top-site-outer .tile {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0) !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
}
/*------快捷方式显示的方框的颜色-------*/
    body {
        --newtab-topsites-outer-card-hover:rgba(0, 0, 0, 0.3) !important;
        --newtab-element-hover-color: rgba(0, 0, 0, 0.3) !important;
        --newtab-text-primary-color: rgba(0, 0, 0, 0.3) !important;
        --newtab-background-color-secondary: rgba(0, 0, 0, 0) !important;
    }
/*------快捷方式字体颜色-------*/
 .top-site-button .title, .context-menu-button {
        color: rgba(0, 0, 0, 0.9) !important ;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0) !important;
    }
/*------背景图片-------*/
    body::before {
        content: "" ;
        z-index: -1 ;
        position: fixed ;
        top: 0 ;
        left: 0 ;
        background:
        /*图片上叠加了一个中心渐变*/
        radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0)),
        /*背景图片*/
        no-repeat url(img.jpg) center ;
        background-size: cover ;
        width: 100vw ;
        height: 100vh ;
    }
}

这里是我现学现卖自己改的。
效果图：
--------------------------------------------------------------------------------------------------------------------------------------------
尾巴：卡饭论坛东厂太监泛滥成灾，审核狗过度敏感。

漂亮

我用的是RunningCheese的样式，可以自动加载Bing每日壁纸

挺好看的，我就加了个图片，搜索栏和网站图标什么的全隐藏就剩了个火狐logo。