Как скрыть фоновые изображения сайта по умолчанию?

Question

Я повсеместно рассматриваю фоновые изображения на веб-страницах как визуальный беспорядок. Изображения могут ухудшить читабельность текста и навигацию по сайту, основными примерами являются страницы сообщества Steam и Wikia (пример страницы). Поскольку Firefox может обнаруживать фоновые изображения (щелкнуть правой кнопкой мыши контекстное меню> "просмотреть фоновое изображение"), возможно ли скрыть (или предпочтительно заблокировать загрузку изображений) на всех страницах?

Answer 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: Как переопределить CSS сайта в Firefox с помощью userContent.css?
Сара Мэддокс: "Как переопределить таблицы стилей CSS в Firefox"
Руководства по поддержке ИТ: «Как использовать пользовательскую таблицу стилей (CSS) с Firefox»