소개

전에 쓴 사람은 여기
※이미 VSCode측의 구조가 바뀌고 있어, 전에 쓴 녀석은 대응하고 있지 않으므로 주의!
요소를 조사하는 방법을 알고 싶은 사람들은 이전을보십시오.

이번에 할 일

터미널 배경을 터미널별로 변경

막상 실장 내용에 달려있다

우선 완제품(소스 코드)

대응하고 있는 범위가 각각 다른 3 종류를 준비했습니다.

terminal의 tab만 대응판

/*
terminalのtabごとに画像が変わります。
split機能を使用しても背景画像はtabに設定されたもののままです。
*/
/*地味にここのクラス指定が他の二つと違うので注意*/
.terminal-outer-container .terminal-tab::after {
  content: '';
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  background-position: top;
  opacity: 0.15;
  pointer-events: none;
}

.terminal-tab:nth-of-type(3n+1)::after {
  background-image: url(痛画像のpath);
}
.terminal-tab:nth-of-type(3n+2)::after {
  background-image: url(痛画像のpath);
}
.terminal-tab:nth-of-type(3n+3)::after {
  background-image: url(痛画像のpath);
}

terminal의 split 기능만 대응판

/*
split Terminal機能で分割されたターミナルそれぞれに画像が設定されます。
タブを増やしても表示される画像は変わりません。
*/
.terminal-outer-container .split-view-view::after {
  content: '';
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  background-position: top;
  opacity: 0.15;
  pointer-events: none;
}

.terminal-tab .split-view-view:nth-of-type(3n+1)::after {
  background-image: url(画像のパス);
}
.terminal-tab .split-view-view:nth-of-type(3n+2)::after {
  background-image: url(画像のパス);
}
.terminal-tab .split-view-view:nth-of-type(3n+3)::after {
  background-image: url(画像のパス);
}

terminal의 tab,split 양쪽 대응판

/*
tabとsplit、両方の画像をそれぞれ指定しています。
細かく指定できます。
*/
.terminal-outer-container .split-view-view::after {
  content: '';
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  background-position: top;
  opacity: 0.15;
  pointer-events: none;
}

.terminal-tab:nth-of-type(3n+1) .split-view-view:nth-of-type(2n+1)::after {
  background-image: url(画像のパス);
}
.terminal-tab:nth-of-type(3n+1) .split-view-view:nth-of-type(2n+2)::after {
  background-image: url(画像のパス);
}

.terminal-tab:nth-of-type(3n+2) .split-view-view:nth-of-type(2n+1)::after {
  background-image: url(画像のパス);
}
.terminal-tab:nth-of-type(3n+2) .split-view-view:nth-of-type(2n+2)::after {
  background-image: url(画像のパス);
}

.terminal-tab:nth-of-type(3n+3) .split-view-view:nth-of-type(2n+1)::after {
  background-image: url(画像のパス);
}
.terminal-tab:nth-of-type(3n+3) .split-view-view:nth-of-type(2n+2)::after {
  background-image: url(画像のパス);
}

해설

원리

:nth-of-type(n) 를 사용하여 첫 번째 요소와 두 번째 요소를 각각 지정하여 이미지를 전환합니다.
(3n+1)이거나 되어 있는 것은 네 번째 페이지를 열 때 이미지가 반복되어 또 첫 번째 이미지가 표시되도록 하기 때문입니다. 설정하려는 이미지의 수에 따라 개별적으로 변경하십시오.

또한 배경 이미지에 따라 기준 위치를 위로 하거나 왼쪽으로 하고 싶습니다.
그 때는 background-position: 基準にしたい場所; 를 지정해 주세요.
이미지의 경로를 지정하는 셀렉터 부분에 함께 쓰면 이미지마다 기준을 바꿀 수도 있습니다.

각 클래스에 대해

.terminal-tab 클래스new Terminal 버튼을 누를 때 추가되는 터미널 탭의 클래스

.split-view-view 클래스.terminal-tab의 하위 클래스이며 split Terminal 버튼을 누를 때 분할 된 각 터미널의 클래스

split 기능을 사용할 때의 각 화면 이미지

terminal-tab만 대응판


split 기능 대응판


어느 쪽도 좋은 느낌으로 고민 버린다 ...

마지막으로

조금 궁리를 하는 것만으로 간단하게 외형이 화려해지므로, 모두도 여러가지 만나 보자! ! !
그리고, 만약 뭔가 잘못되어 있는 부분이 있거나, 신경이 쓰이는 것이 있으면 코멘트해 주세요!

누군가 이것을 VSCode의 확장으로 만들어 주지 않을까 ...
스스로 하는 건 k...

관련 페이지

· 【Visual Studio Code】의 터미널의 배경을 아프게 할 수 없는지 시험해 보았다
자신이 전에 쓴 사람
VSCode 개발자 콘솔을 여는 방법이나 작성

· Visual Studio Code 통증 터미널화
자신이 쓴 전의 놈이 대응하지 않게 되었을 때에, 대응판을 써 준 기사
이번 소스는 이것을 바탕으로 손을 더한 것
사이드 바의 이미지 변경도 쓰고 있습니다.

· workbench.colorCustomizations를 사용한 통증 Visual Studio Code화 계획
자신이 VSCode 터미널의 배경 이미지를 괴롭히는 계기가 된 사람