Как изменить фоновое изображение в Visual Studio Code | by Omobolanle Arogundade
Некоторое время назад я опубликовал скриншот кода в нашем любимом редакторе кода (Visual Studio Code), а затем несколько друзей спросили, как я изменил фоновое изображение. Я подумал, что было бы неплохо написать этот пост. Visual Studio Code (VSCode) — фантастический редактор кода, позволяющий настраивать многие аспекты интерфейса в соответствии с вашими предпочтениями.
Хватит долго болтать, давайте к делу. Как мы можем изменить ваше фоновое изображение в VSCode, верно? Вот, начнем:
Откройте панель «Расширения» и найдите фоновый плагин, установите и включите его. Или выполните следующую команду
ext install background
Чтобы изменить фоновое изображение в VS Code, вам нужно перейти в редактор настроек. Есть несколько способов сделать это:
- Нажмите
Ctrl + ,на клавиатуре (илиCmd + ,на Mac) и нажмите кнопкуИзменить в settings..
json - Щелкните значок шестеренки в левом нижнем углу окна VS Code и щелкните значок 9.0014 Изменить в settings.json кнопка.
- Перейдите в
Код/Файл > Настройки > Настройкив верхнем меню и нажмите кнопкуИзменить в settings.json. - Запустите
Cmd/Ctrl + Shift + Pи выберитекоманду «Открыть настройки (JSON)».
json Если вам не нравится какая-либо из предопределенных конфигураций, вы также можете настроить фон самостоятельно. Для этого вам просто нужно обновить фоновый раздел settings.json со следующим примером;
{
"background.fullscreen": {
"image": "https://pathtoimage.png", // URL вашего изображения
// "image": ["https://pathtoimage.png"] , // Массив может быть полезен при установке интервала для карусели
"opacity": 0.91, // рекомендуется 0.85 ~ 0.95
"size": "cover", // также css, `cover` для самоадаптации (рекомендуется) ，или `contain`、`200px 200px`
"position": "center", // псевдоним `background-position`, по умолчанию `center`
"interval": 0 // секунды интервала для карусели, по умолчанию `0 ` для отключения.
}
} Другими примерами являются;
- отключить расширение
{
"background.enabled": false
} - пользовательские изображения
{
"background.useDefault": false,
"background.useDefault": false,
"background. /a.com/b.png", "file:///Users/somepath/a.jpg"]
} - пользовательский стиль — непрозрачность
{
"background.style": {
"непрозрачность" : 0.6
}
} - пользовательский стиль — размер изображения
{
"background.style": {
"background-size": "300px 460px"
}
} - полноэкранный режим
{
"background.fullscreen4": {
"background.fullscreen4":
://pathtoimage.png", // URL вашего изображения
// "image": ["https://pathtoimage.png"], // Массив может быть полезен при установке интервала для карусели
"opacity": 0,91, // 0,85 ~ 0,95 рекомендуется
"размер": "обложка", // также css, "обложка" для самоадаптации (рекомендуется)，или `содержать`, `200px 200px`
"position": "center", // псевдоним `background-position`, по умолчанию `center`
"interval": 0 // секунды интервала для карусели, по умолчанию `0` для отключения.
}
} Вот как должен выглядеть ваш окончательный результат:
Надеюсь, это поможет! Дайте мне знать, если у вас есть какие-либо вопросы или вам нужны дополнительные разъяснения по любому из шагов, упомянутых выше.
Фоновые изображения CSS и специальные возможности
Последнее обновление: 14 июня 2011 г.
Появилось множество статей, в которых обсуждались фоновые изображения и проблемы их доступности. Кажется, нет четкого решения для всех браузеров и обсуждения всех текущих методов в одном месте.
Проблема
Фоновые изображения CSS часто используются вместо встроенных изображений, поскольку их можно использовать в качестве карт спрайтов CSS. Карта спрайтов — это способ использования одного изображения и отображения только небольшой части этого изображения в виде определенного значка или элемента страницы, например вкладки страницы. Поскольку отправляется только одно изображение, оно выполняется быстрее, чем множество небольших изображений, и может повысить производительность страницы.
Основная проблема с недекоративными фоновыми изображениями CSS заключается в том, что при отключении изображений или включении режима высокой контрастности (например, в ОС Windows) фоновые изображения исчезают. Если фоновое изображение либо содержит текст, как в случае вкладок страниц, либо содержит осмысленные изображения значков, то пользователи режима высокой контрастности и те, у кого нет изображений, не увидят этот контент. Хотя это может повлиять только на пользователей программ чтения с экрана, для пользователей программ чтения с экрана это проще решить, используя атрибут title в ссылках на изображения и текст за пределами экрана внутри контейнеров, содержащих фоновые изображения.
Сравнение со встроенными изображениями
Эта проблема отличается для стандартных встроенных изображений, поскольку при их удалении браузеры вместо них вставляют замещающий текст на экране. Это может быть проблемой для небольших значков, где мало места, но для многих изображений это не проблема.
Требования
Для изображений текста, для которых часто используется этот метод, существует четкое требование WCAG 2 уровня AA не использовать изображения текста, когда текст может быть отображен технологической платформой. Для веб-приложений почти всегда можно создать текст, за исключением шрифтов, которых может не быть в пользовательских системах. В этих случаях можно использовать технику стиля Cufon. Проблема все еще остается для изображений, которые не являются текстовыми, но имеют смысл, и проблемы по-прежнему относятся к другим требованиям доступности, таким как Раздел 508.
Решения
Невозможно просто скрыть текст за чем-либо, так как фоновое изображение CSS является фоновым изображением, и, таким образом, никакая настройка его непрозрачности не приведет к тому, что текст в элементе, который его содержит, будет закрыт. Возможны несколько концептуальных решений.
Не использовать фоновые изображения
Просто замените недекоративный фон CSS стандартными встроенными изображениями.
Это решение не решает проблему производительности, но предоставляет доступное решение и определяет, сколько сайтов было отрендерено за последние 15 лет.
Позиционирование частей встроенного изображения
Не используйте фоновые изображения — используйте встроенные изображения, но используйте CSS для размещения только той части изображения, которую вы хотите видеть на нужных элементах. В основном это включает в себя создание встроенной карты спрайтов изображения. Информацию об этой технике можно найти в статье TJK Design CSS Sprite.
Использовать до или после псевдоэлементов
Для отображения изображений можно использовать псевдоэлементы. Этот метод отлично подходит для изображений, чтобы сохранить их на экране, но не поддерживается некоторыми браузерами, в основном Internet Explorer 7. Информацию об этом методе можно найти в блоге Paciello Group. Кроме того, псевдоэлементы не могут быть выбраны.
Использование холста HTML 5
Элемент холста можно использовать для отображения изображения и размещения холста поверх текста внутри элемента.
Это метод, который Cufon использует, когда поддерживается HTML 5. В противном случае Cufon использует VML для отображения пользовательских шрифтов. Cufon разбивает каждое слово на отдельный элемент span, и, таким образом, одним из побочных эффектов использования Cufon является то, что текст может быть разбит на части при чтении с помощью программы чтения с экрана.
Использование трюков с позиционированием CSS
Можно разместить фоновое изображение как дочернее (но поверх) элемента, содержащего текстовый эквивалент. Затем сделайте размер родителя шириной изображения. Когда фоновые изображения отключены, текст появляется в некоторых браузерах, и текст также будет доступен для программ чтения с экрана.
Этот метод работает неодинаково в разных браузерах. Firefox по-прежнему отображает текст поверх фонового изображения, в то время как Internet Explorer скрывает текст за изображением. Хотя в режиме высокой контрастности Internet Explorer не отображал текст должным образом.
