VSCode sets a transparent background to solve the problem of global font blur caused by transparency


Most tutorials found online use this method

/*background start*/
body{
    
    pointer-events:auto !important;background-size:100% !important;opacity: 0.93 !important;background-position: 0 0 !important;background-image: url('file://E:/OneDrive/Pictures/overwatch/bg-53.jpg') !important;content:'';position:absolute;z-index:99999;width:100%;background-repeat:no-repeat;}
*background end*/

But this method has a disadvantage, which is the problem of transparency. The higher the transparency of the photo, the higher the transparency of the font, which makes the code or menu options unclear.

###Solution ideas:
1. Edit the workbench.html file, and then add a div, which is specially used to display the background image.
2. Use transparent png format pictures, so that the transparent part will not cause the code or menu to be unclear
##Solution
    Edit the file under the installation path
    Microsoft VS Code\resources\app\out\vs\code\electron-browser\ workbench\workbench.html
Add the following div in the body (must be added in the first line)

<body class="monaco-shell vs-dark" aria-label="">
        <!-- 把代码添加到这里 -->
                <div style="
                        background-image: url('file://C:/Images/a2.png');
                        pointer-events:none;
                        opacity:0.72;
                        position:absolute;
                        z-index:2;
                        background-size:contain;
                        width: 100%;
                        height: 100%;
                        left:360px;
                        background-repeat:no-repeat;
                        display:block;">
                        </div>
         <!-- 以上是控制背景图的代码 -->
、/body>

#投资图
The front end is a pit for me, I hope someone can tell me how to automatically align right

insert image description here

Guess you like

Origin blog.csdn.net/yeqifeng2288/article/details/86517355