如何在Firefox中更改主页的背景图像？

debugcn 发表于 Dev

苏拉夫·高斯瓦米（Sourav Goswami）

我想通过将背景图像更改为我想要的内容来更改无聊的Firefox浏览器主页的外观。

基本系统详细信息：

操作系统：GNU / Linux
Firefox版本：72.0a1（2019-10-22）（64位）

如果我无需附加组件就可以这样做对我来说会更好。

苏拉夫·高斯瓦米（Sourav Goswami）

在Firefox中，无法通过“设置”更改主页（新标签）的背景图像。插件当然可以做到这一点，但是有一种更好的方法：我们可以创建一个CSS文件，并告诉Firefox在启动时加载该文件。

这样做，请按照下列步骤操作：

转到about:support地址栏中。查看“应用程序基础”部分➔配置文件目录（在MacOS上为“配置文件文件夹”）➔单击按钮“打开目录”（在MacOS上为“在Finder中显示”）：

它应该打开您的Firefox配置文件目录，该目录通常位于$ HOME目录中。

创建一个名为目录铬打开的目录中，如果它不是已经存在。
转到chrome目录，然后（a）创建一个名为img的目录，（b）创建一个名为userContent.css的文件。将图像移动到img目录。
Open userContent.css in any text editor and paste the following code:

@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing) {
    .click-target-container *, .top-sites-list * {
        color: #fff !important ;
        text-shadow: 2px 2px 2px #222 !important ;
    }

    body::before {
        content: "" ;
        z-index: -1 ;
        position: fixed ;
        top: 0 ;
        left: 0 ;
        background: #f9a no-repeat url(img/cherry-blossom-1260646.jpg) center ;
        background-size: cover ;
        width: 100vw ;
        height: 100vh ;
    }
}

Don't forget to change the file name in url(img/cherry-blossom-1260646.jpg) to your preferred image.

Save the file and quit the editor.

Go to the url about:config, accept the risk (we will not really do anything harmful here, nothing to worry about), and in the Search Bar, paste toolkit.legacyUserProfileCustomizations.stylesheets, and set the value to true. This tells Firefox to load the CSS file at startup.
Restart Firefox if it's running.

Explanation to the CSS code

@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing)

Enables the background on Home Tabs, New Tabs, and in Private Browsing tabs.

.click-target-container *, .top-sites-list * {
    color: #fff !important ;
    text-shadow: 2px 2px 2px #222 !important ;
}

Changes the "Top Sites" and "Highlights" colours to white with a dark text-shadow. For lighter wallpaper, you need to edit the colours to make it look more comfortable to you.

body::before {
    content: "" ;
    z-index: -1 ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    background: #f9a no-repeat url(img/cherry-blossom-1260646.jpg) center ;
    background-size: cover ;
    width: 100vw ;
    height: 100vh ;
}

加载具有固定位置以及视口的宽度和高度的图像（此处为img / cherry-blossom-1260646.jpg）body::before。如果正在加载背景图像或找不到背景图像，则将背景色设置为＃f9a。

将background-size: cover使其自动调节与Firefox和放大/缩小不会影响到图像的大小。

在GNU / Linux和Unix系统上，您也可以从加载图像/usr/share/backgrounds/。

重新启动后，Firefox应该如下所示：