VScode カスタム背景画像

VScode を使用して背景画像をカスタマイズし、コードを記述するためのインターフェイスをパーソナライズします。
効果は次のとおりです。
ここに画像の説明を挿入します
ここに画像の説明を挿入します

背景画像をカスタマイズするには、拡張プラグインをインストールする方法と、CSS 設定ファイルを変更する方法の 2 つの方法があります。
拡張機能をインストールするには、市場で背景を検索し、指示に従って使用します。
CSS設定ファイルを変更して背景画像を設定する方法を紹介します。

VScodeのインストールディレクトリを以下のように入力します[...]人によってパスは異なりますが、以下は同じです。VScode のインストール ディレクトリを見つけます。
[...]\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

この workbench.desktop.main.cssファイルを開いた後、最後に次のコードを追加します。

body {
    pointer-events: auto !important;
    background-size: 100% !important;
    opacity: 0.8 !important;                              /* 这里是图片透明度,根据图片颜色和需要调整,保证不影响写代码*/
    background-position: 0 0 !important;
    background-image: url("bgp/77.jpg") !important;         /*这行是你的图片地址,将引号中的路径替换即可*/
    content: "Hello World!";
    position: absolute;
    z-index: 999;
    width: 100%;
    background-repeat: no-repeat;
}

次のように、新しい行を開始して挿入するだけです。
スクリーンショットの挿入

画像アドレスに絶対アドレスを使用するとうまくいかないようです。ここでは相対パスを使用することをお勧めします。ファイルが置かれているディレクトリに新しいフォルダーを作成し
相対パスが「bgp/77.jpg」という名前の画像を保存しました。workbench.desktop.main.cssbgp77.jpg

おすすめ

転載: blog.csdn.net/m0_67313306/article/details/128168873