☰

如何默认隐藏网站背景图片？

tag-icon • tag-icon firefox
如何默认隐藏网站背景图片？

我普遍认为网页上的背景图片会造成视觉混乱。这些图片可能会影响文本的可读性和网站导航，主要的例子包括Steam 的社区页面和 Wikia (示例页面)。因为 Firefox 可以检测背景图像（右键单击上下文菜单 > “查看背景图像”），是否可以在所有页面上隐藏（或最好阻止加载）图像？

答案1

如今，网站上的大多数背景图像都是按照以下规则在 CSS 样式表中定义的body {background:foo;}

在 Firefox 中，用户可以定义自定义 CSS 样式表，并将其应用于加载的网页。当您在自定义样式表中为加载的网页中定义的 CSS 选择器指定一个值时，这两个值将被视为具有同等权重，在这种情况下应用哪个值取决于最后从 CSS 中解析哪个值。为了让我们的自定义值比 的值具有更大的权重body {background:foo;}，我们将 标签添加!important到规则中。这样，无论两个值中的哪一个先被解析或最后被解析，浏览器都会优先加载它。

首先，让我们创建自定义 CSS 文件：

  • 打开 Firefox 并按“Alt”键显示顶部菜单，
    然后单击“帮助”-->“故障排除信息”
  • 点击“配置文件夹”条目旁边的“显示文件夹”按钮
  • 打开chrome在 Windows 资源管理器中打开的文件夹中名为的文件夹
  • 如果文件夹不存在，则创建一个名为的文件夹chrome并打开
  • 创建名为 的 CSS 文件userContent.css。要创建它，您可以创建一个.txt文件并重命名它。

  • 复制以下任一代码至userContent.css

  • 要将您访问的每个网页的背景绘制为白色，请粘贴以下代码

    body {
background:white !important;
}

  • 如果你只针对callofduty.wikia.com你链接的，请粘贴以下代码

    @-moz-document domain(callofduty.wikia.com) {
body {
background:white !important;
}
}

  • 为了提高可读性 callofduty.wikia.com，你可以粘贴该代码

    @-moz-document domain(callofduty.wikia.com) {
body {
background:white !important;
color:black !important;
}
}

  • 完成.css文件编辑后，保存并重新启动 Firefox。

对于您链接的其他网站，我不知道如何更改那里的背景。因此，如果您使用我发布的第一个代码，请注意它不适用于每个网站。

使用上面描述的技术，您可以将白色替换为任何其他颜色，并在自定义 CSS 文件中指定您能想到的任何现有 CSS 规则。如果您稍后删除所做的更改，则可以删除或重命名.css我们刚刚创建的文件。在许多网页上，以下代码也可以很好地删除一些背景图像，而不会弄乱背景颜色：

body {
background:none !important;
}

关于您关于背景图像是否被隐藏或阻止加载的问题，我不确定使用上面描述的方法它是否会被加载而不显示。

资料来源：
Rauf @superuser.com：如何使用 userContent.css 覆盖 Firefox 中网站的 CSS？
Sarah Maddox：“如何在 Firefox 中覆盖 CSS 样式表”
IT 支持指南：“如何在 Firefox 中使用自定义样式表 (CSS)”

相关内容