【已解决】CSS 特殊字符样式冲突

疑问解答
1

均已在 CSS 文档首行使用 @charset "UTF-8";（以 UTF-8 格式编码）。已在沙箱测试。

/*ͼ1*/
body {
  background-size: cover;
  opacity: 0.9;
  background-image: url(https://i0.hdslb.com/bfs/new_dyn/444db1ff36d8558788005772f47905505978678.png@720w_422h_1e_1c.avif);
}

这个 CSS 可以给界面加背景，并使白板 node 被双击激活编辑时背景保持原样。

在 popout-window（即把 tab 拖出窗口后的浮窗），这段代码所在 CSS 档的所有样式均不会生效，即使 ͼ1 在注释里。并行启用其他 CSS 档的样式不受影响。

删除 ͼ1，浮窗样式恢复正常，但普通界面和浮窗均无法再排除白板 node 被双击激活编辑时的背景。

只要出现这个字符组合，且必须是组合，只有 ͼ 都不行。

ͼ1 这个字符出现的理由是 Ob 白板 node 被双击激活编辑时 class 为 .cm-editor.ͼ1.ͼ2。之前一直用 .cm-editor.ͼ1.ͼ2 {background-color: var(--background-primary);} 来排除 node 背景，直到昨天发现和 popout-window 应用样式有冲突。

Win11，Ob v1.5.0，默认主题，恳请解惑。

2

我记得charset是不需要单独设置的

用 > , :first-child 之类的别的选择器试试

3

感谢建议，我多换了几种方式研究了一会，已经能够实现想要的效果，但似乎用 body 设置背景图多少有些问题，每次点击 node 时，可能是因为切了类，会有一瞬间闪图，实在难顶，所以还是换写法解决了。

.app-container::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url(https://i0.hdslb.com/bfs/new_dyn/444db1ff36d8558788005772f47905505978678.png@720w_422h_1e_1c.avif);
  opacity: 0.1; /*不透明度*/
  z-index: 60; /*层级*/
  pointer-events: none;
}

设置了 charset 是为了先排除编码问题。

4

使用http server插件后，可以用本地图片了 :laughing:

5

不用插件，本地图片转为 DataURL 就可以了。

background-image: url(放入图片对应DataURL)