vscode-background의'background.스타일 설정 정보

VScode의 배경 이미지vscode-background와 같은 확장 기능을 변경하는 설정은 사용하기 어려워서 그것에 대한 필기입니다.

개요

아래와 같이 추가background-size조정opacity은 대략 ok라고 생각합니다.vscode-background는 div 요소를 vscode 텍스트 입력 부분의 ::after 요소에 추가하여 거기background-image에 귀여운 이미지를 표시합니다.settings.json의background.style는이 ::after부분에적용되기 때문에이 뜻대로 편집하세요.

    "background.useDefault": false,
    "background.customImages": [
    "path_to_image"
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "100% 100%",
        "background-repeat": "no-repeat",
        "background-size": "50%",
        "opacity": 0.3
    }

배경

나는 최근에 Atom에서 VScode로 갈아탔다.Atom에서 고희 선생를 배경으로 표시를 했기 때문에 VScode에서도 같은 일을 하고 싶습니다.vscode-background를 사용했지만 css의 설정은 이해하기 어려웠다. 15분 정도의 시간을 사용했기 때문에 여기서 정리했다.

vscode-background 소개

vscode-background는 좋은 확장 기능입니다.확장 기능에 대한 설명 페이지도 있습니다. 3개의 패널에 각각 귀여운 이미지를 분배하면 귀여운 VScode가 가능합니다.

vscode-background 설정 정보

다음 설정이 settings.json에 추가되었습니다. 이 설정을 편집하십시오.background.customImages에 귀여운 이미지 경로를 추가하고 background.useDefault 를 False 로 설정하면 귀여운 이미지를 표시합니다.

// Plugin background enabled.background 插件是否启用
  "background.enabled": true,

  // If use front image,which means image is placed on the top of your code. 是否使用前景图，这样会使图片放在代码的顶部
  "background.useFront": true,

  // Custom style.自定义样式.
  "background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "width": "100%",
    "height": "100%",
    "background-position": "100% 100%",
    "background-repeat": "no-repeat",
    "opacity": 1
  },

  // Use default images.使用默认图片
  "background.useDefault": true,

  // Your custom Images(Max length is 3). 自己定制背景图，最多3个
  "background.customImages": [],

편집하지 않고 이미지를 설정하면 이미지 크기가 어떻게 되는지 다음 귀여운 이미지를 표시하는 편집기가 됩니다.좋은 일이지만 일을 할 수 없어서 수정하고 싶어요.

여기, 먼저 background.style와width!에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.나는 변태처럼 변했다.
height의 기술에서도 예상할 수 있듯이 이 확장 기능은 텍스트 입력 부분에 "width":"50%" 요소 추가되어 귀여운 이미지를 보여 준다.이렇게 스타일을 편집하세요.
참고이 일대, 설정"content": "''"하면 됩니다.::after 내친김에 설정하면 작업 중에 예상치 못한 귀여운 느낌이 든다.

    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "100% 100%",
        "background-repeat": "no-repeat",
        "background-size": "50%",
        "opacity": 0.3
    }

마지막

언제 어디서 배경으로 사용된 고 씨의 초상화를 얻었는지 출처를 알 수 없어 링크를 붙이지 않았다.작가님께 죄송하지만 출처를 아시는 분이 있으면 말씀해 주세요.