Como esconder as imagens de fundo do site por padrão?

Question

Eu considero universalmente imagens de fundo em páginas da web como uma confusão visual. As imagens podem prejudicar a legibilidade do texto e navegação do site, os principais exemplos incluem páginas da comunidade do Steam e da Wikia ( página de amostra ). Como o Firefox pode detectar imagens de fundo (clique com o botão direito do mouse no menu de contexto > "view background image"), é possível ocultar (ou bloquear as imagens de carregamento) em todas as páginas?

    

Answer 1

Atualmente, a maioria das imagens de plano de fundo em sites é definida em uma folha de estilos CSS pela regra body {background:foo;}

No Firefox, os usuários podem definir folhas de estilo CSS personalizadas que são aplicadas a páginas da Web carregadas. Quando você especifica um valor nessa folha de estilo personalizada para um seletor CSS definido na página da Web carregada, esses dois valores são tratados como ponderados de forma igual e a questão de qual valor é aplicado nesse caso, depende de qual valor é analisado. último do CSS. Para dar ao nosso valor personalizado mais peso sobre o valor de body {background:foo;} , adicionamos a tag !important à nossa regra. Dessa forma, será preferível que o navegador carregue, não importa qual dos dois valores seja analisado primeiro ou por último.

Para começar, vamos criar nosso arquivo CSS personalizado:

• Abra o Firefox e pressione a tecla "Alt" para exibir o menu principal. Clique em "Ajuda" - > 'Informações sobre solução de problemas'
• Clique no botão "Mostrar pasta" ao lado da entrada "Pasta de perfil"
• Abra a pasta chamada chrome na pasta que abriu no Windows Explorer
• Se a pasta não existir, crie uma pasta chamada chrome e abra-a
• Crie um arquivo CSS com o nome userContent.css . Para criá-lo, você pode criar um arquivo .txt e renomeá-lo.

• Copie um dos seguintes códigos para userContent.css

• Para pintar o plano de fundo de todas as páginas da Web que você visita na cor branca, cole o código a seguir

  body {
  background:white !important;
  }
  

• Se você segmentar apenas callofduty.wikia.com , vinculado, cole o código a seguir

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

• Para melhorar a legibilidade um pouco mais em callofduty.wikia.com , você pode colar esse código

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

• Quando terminar de editar o arquivo .css , salve-o e reinicie o Firefox.

Para o outro site que você vinculou, não consegui descobrir como alterar o plano de fundo. Então, se você usar o primeiro código que eu postei, esteja avisado que não funcionará com todos os sites.

Usando a técnica descrita acima, você pode substituir a cor branca por qualquer outra cor e especificar qualquer regra de CSS existente que você possa imaginar em nosso arquivo CSS personalizado. Se depois você se livrar das alterações feitas, poderá excluir ou renomear o arquivo .css que acabamos de criar. Em muitas páginas da web, o código a seguir também funcionará bem para se livrar de algumas imagens de plano de fundo sem mexer na cor do plano de fundo:

body {
background:none !important;
}

Com relação à sua pergunta se a imagem de fundo estiver oculta ou bloqueada, não tenho certeza se ela foi carregada sem ser exibida, usando o método descrito acima.

Fontes:
Rauf @ superuser.com: Como sobrescrever o CSS de um site no Firefox com userContent.css?
Sarah Maddox: "Como sobrescrever folhas de estilo CSS em Firefox "
Suporte de TI Guias: "Como usar uma folha de estilo personalizada (CSS) com o Firefox"