CSS分享:自定义背景图和侧边栏背景图的css

推荐两个壁纸网站:

找到喜欢的图片,复制图片的链接粘贴到对应的url链接处即可
css由英文论坛收集而来,技术性问题不会回复~~

自定义背景图

/*.markdown-preview-view::after {  This was the previous line*/  
.workspace-split.mod-root .view-content::after {
  content: "";
  position: fixed;
  background-image: url(https://w.wallhaven.cc/full/md/wallhaven-md3vjm.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px) brightness(60%) saturate(50%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.markdown-preview-view {
  z-index: 1;
}

/* 关系图谱界面 */
.workspace-leaf-content[data-type="graph"] .view-content {
  z-index: 0;
}
.theme-light .workspace-leaf-content[data-type="graph"] .view-content::after {
  z-index: -1;
  content: "";
  position: absolute;
  background-image: url( https://images.unsplash.com/photo-1514519334989-3d5c8b1a9f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(2px) brightness(100%) saturate(50%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.theme-dark .workspace-leaf-content[data-type="graph"] .view-content::after {
  z-index: -1;
  content: "";
  position: absolute;
  background-image: url(https://w.wallhaven.cc/full/pk/wallhaven-pk8pzj.png);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(2px) brightness(40%) saturate(60%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.CodeMirror-foldgutter {
width:0
}

自定义侧边栏

/* Draw background image and add a separator from the header. */
.nav-files-container {
    background-image: url("https://images.unsplash.com/photo-1614292264554-7dca1d6466d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"); /* Replace me with the image you like. */
    background-size: cover;
    background-position: 0%;
    border-top: 0px solid var(--background-modifier-border);
    z-index: 1;
}

/* Draw a solid overlay on top of image. */
.nav-files-container:before {
    content: "";
    background-color: var(--background-secondary);
    opacity: 0.9;
    height: 0%;
    width: 0%;
    position: fixed;
    z-index: 2;
    display: block; 
}

/* Target the top-level folder-title to add more negative space from header. */
.nav-folder-title[data-path="/"] {
    padding-top: 1em;
}

/* Extra separation from the background for the text. A subtle text shadow. */
.nav-folder-title-content, .nav-file-title-content {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
}

.theme-dark .nav-folder-title-content, .theme-dark .nav-file-title-content {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Tell the child nav-folder to be on top of image and overlay */
.nav-folder {
    position: relative;
    z-index: 3;
}

/* Make the active selection background and hover frosted glass for more fun. */
.nav-file-title.is-active, .nav-folder-title.is-active, body:not(.is-grabbing) .nav-file-title:hover, body:not(.is-grabbing) .nav-folder-title:hover {
    background: rgba(var(--text-muted-rgb), 0.1);
    box-shadow: inset 1px 1px 0 0 rgba(var(--text-muted-rgb), 0.055);
    backdrop-filter: blur( 4px );
    border-radius: 3px 0 0 3px;
}
8 个赞

感谢 有效果! 原来改为 workspace 了么

1 个赞