遇到的问题：
现在想更换别的主题，可是Border主题的背景用习惯了，恳请哪位大佬能把Border主题的背景CSS剥离出来！！！
这个我有看过， Border 主要是有背景图片和前景遮罩（就是 noise.png）
但是其他不少主题只有背景，没有前景。
一个曲线救国的办法是手动把背景和噪声合成为一张图片来作为背景（
我也想过类似的办法，不过后面要更改显示背景图的话还得合成。最主要的是合成后的效果没那么好
嗨~请问你解决了这个问题吗？我不会编程，我做了些尝试：
代码
/* background - transparent */ body { --tab-background-active: transparent; --tab-container-background: transparent; --titlebar-background: transparent; --titlebar-background-focused: transparent; } .sidebar-toggle-button, .workspace-tabs.mod-top, body.is-focused .sidebar-toggle-button, body.is-focused .workspace-tabs.mod-top { --tab-container-background: transparent; } body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-leaf, body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-leaf-content, body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .view-header:not(.animate), body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .view-content:not(.vignette-radial, .vignette-linear, .animate, .ptm-fullscreen-writing-focus-element), .mod-left-split .workspace-tab-header.has-active-menu, .mod-right-split .workspace-tab-header.has-active-menu, body:not(.is-mobile) .workspace-tab-header-container, .workspace>.workspace-split { background-color: transparent !important; } body:not(.is-mobile) .app-container, body:not(.is-mobile) .workspace, .workspace-ribbon.mod-left:before { background-color: transparent; } .workspace-ribbon, .workspace-ribbon.mod-left.is-collapsed { border-right: none; background-color: transparent; } .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active { background-color: transparent !important; box-shadow: none; overflow: visible; } body:not(.is-mobile) .view-header-title-container:not(.mod-at-start):before, body:not(.is-mobile) .view-header-title-container:not(.mod-at-end):after { background: transparent; } /*----------workspace----------*/ /* ====== background ===== */ .theme-dark { --bg-url: url(https://cn.bing.com/th?id=OHR.CheetahMound_ZH-CN1970221812_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=3840&h=2160&rs=1&c=4); --noise-url: url(https://raw.githubusercontent.com/Akifyss/obsidian-border/refs/heads/main/img/noise.png); } .theme-dark:has(>.app-container) { background: var(--bg-url); background-position: center center; background-repeat: no-repeat; background-size: cover; } .theme-dark .workspace-split.mod-left-split .workspace-tab-container, .theme-dark .workspace-split.mod-left-split .workspace-tabs.mod-top .workspace-tab-container, .theme-dark .workspace-split.mod-left-split .workspace-tabs:not(.mod-top) { background: var(--noise-url); backdrop-filter: blur(32px); background-blend-mode: normal; } .theme-dark .workspace-split.mod-right-split .workspace-tab-container, .theme-dark .workspace-split.mod-right-split .workspace-tabs.mod-top .workspace-tab-container, .theme-dark .workspace-split.mod-right-split .workspace-tabs:not(.mod-top) { background: var(--noise-url); backdrop-filter: blur(32px); background-blend-mode: normal; } .theme-dark .workspace-split.mod-root .workspace-tab-container, .theme-dark .workspace-split.mod-root .workspace-tabs.mod-top .workspace-tab-container, .theme-dark .workspace-split.mod-root .workspace-tabs:not(.mod-top) { background: var(--noise-url); backdrop-filter: blur(32px); background-blend-mode: normal; }
我看了修改部分，工程量太大了、可能需要涉及很多细节和优化、需要合适的css变量和style-setting配置，而正如我所说，我不会编程，我费了很大的劲而效果并不是很好——这令我精疲力尽很疲惫，因此我更倾向分享些半成品。
如果你愿意的话，可以手动修改，或者等待真正有技术有能力的人优化分享。
卡片布局CSS：我看到你的预期效果那张图里是卡片布局，但修改部分、文字描述、链接预设 并不涉及，这令我有些困惑——不过以防万一，我做了卡片布局尝试--不过这段卡片CSS与Border的卡片并不相同，它更接近AcuPpuccin--这和开发者模式下界面分成左中右，左侧同层级的分头部、文件列表、vault有关
.theme-dark { /*--Card--*/ --card-radius: 12px; /*卡片圆角弧度*/ --card-padding: 6px; /*形成卡片的关键*/ /*--card-border: 2px solid black;*//*观测卡片样式指标*/ /*====================*/ /*===Card-Layout-Module===*/ /*-----主工作区-----*/ .workspace-split.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-container { margin: var(--card-padding); border-radius: var(--card-radius); border: var(--card-border); } /*---侧边栏卡片化---*/ .workspace-split.mod-left-split .workspace-tab-container, .workspace-split.mod-right-split .workspace-tab-container { margin: var(--card-padding); border-radius: var(--card-radius); border: var(--card-border); } /*---Vault卡片化---*/ .workspace-sidedock-vault-profile { margin-bottom: var(--card-padding); border-radius: var(--card-radius); border: var(--card-border); border-top: var(--card-border) !important; } /*--状态栏卡片化---*/ .status-bar { border-radius: var(--card-radius); border: var(--card-border); } /*---标签页: 选项卡------*/ .workspace-split.mod-vertical.mod-root .workspace-tab-header.tappable:hover, .workspace-split.mod-vertical.mod-root .workspace-tab-header.tappable.is-active { border-radius: var(--card-radius); border: var(--card-border); } /* 隐藏左右三角形 */ .workspace .mod-root .workspace-tab-header.is-active::before, .workspace .mod-root .workspace-tab-header.is-active::after, /*separatorline*/ .workspace .mod-root .workspace-tab-header-inner::after { display:none; } /*---过渡线---*/ /*主工作区&侧边栏*/ .workspace-leaf-resize-handle, /*标签页&连接内容*/ .workspace-tab-header-container { border-color: transparent;/*不影响功能下只能如此*/ } /*Ribbon*/ .workspace-ribbon.side-dock-ribbon.mod-left::before { border-bottom: none; } .workspace-ribbon, .workspace-ribbon.side-dock-ribbon.mod-left.is-collapsed { border-right: none; } }
以下是左中右面板背景相关：
- 中间面板背景、右侧面板背景customize方法：
把文件列表背景CSS里的“ .workspace-split.mod-horizontal.mod-sidedock.mod-left-split .workspace-tabs.mod-top .workspace-tab-container”换对应区域选择器名称。 - 如果喜欢左右面板都有同样的背景图片，有可以同时选择侧边栏的选择器来节约代码
文件列表背景CSS=左侧面板背景customize
/*==文件列表背景==*/ .theme-dark { .workspace-split.mod-horizontal.mod-sidedock.mod-left-split .workspace-tabs.mod-top .workspace-tab-container { position: relative; } .workspace-split.mod-horizontal.mod-sidedock.mod-left-split .workspace-tabs.mod-top .workspace-tab-container::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: url(https://cn.bing.com/th?id=OHR.PierOfEastbourne2025_ZH-CN7178301269_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=3840&h=2160&rs=1&c=4); /*这里是你的图片url*//*var(--light-url)换成url()*/ background-size: cover; background-repeat: no-repeat; z-index: -5; filter: blur(0px) contrast(1) saturate(1) brightness(1); /*CSS-preset*//*文件列表图片修改模糊明度饱和度等*/ } }文件列表背景CSS=左侧面板背景customize_更简洁版--如果无需对图片模糊明度饱和度等处理
/*==文件列表背景==*/ .theme-dark { .workspace-split.mod-horizontal.mod-sidedock.mod-left-split .workspace-tabs.mod-top .workspace-tab-container { background-image: url(https://cn.bing.com/th?id=OHR.PierOfEastbourne2025_ZH-CN7178301269_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=3840&h=2160&rs=1&c=4); /*这里是你的图片url*//*var(--light-url)换成url()*/ background-size: cover; background-repeat: no-repeat; } }
其他：
底层前景色–icon 颜色(不含选项卡文本和’×’、含选项卡前图标)：通过改变–IXD-color后的参数就可以自定义
代码
.theme-dark { --IXD-color: skyblue; /*--icon-color--*/ /*toggle*/ .sidebar-toggle-button .clickable-icon, /*标签页头*/ .workspace-tab-header-inner-icon, /*+*/ .workspace-tab-header-new-tab .clickable-icon, /*∨*/ .workspace-tab-header-tab-list .clickable-icon, /*ribbon*/ .side-dock-actions .clickable-icon.side-dock-ribbon-action, /*在透气背景下突出大小关图标*/ .titlebar-button { color: var(--IXD-color); } }
既然涉及到底层前景色的图标，需要说明的是（这些不在预期和修改里，我没管，可以和上面的“底层前景色–icon颜色”效果图对比一下）：
- 我注意到 sunet 对当前活动图标、文件列表文件做了处理，应该对应的是“activated-file-tab-style-dark”，这需要.is-active之类···
- 并且对navbar的活动icon也做了细节处理
总之，
- 预期的效果–磨砂质感应该有了、但可能不是预期效果示意图那样1比1还原；
- 背景设置如果手动调节，应该有个七七八八
- 如果您对细节把控很严格，不如用原装的？
其实之前就是为了解决 启动时 它原本的 背景图片加载问题， 它的图片是放在Guthub的图床上，每次启动需要解决网络问题。现在我给他改到了Gitee的图床
