html - 具有从主题继承的背景颜色的 Css 叠加

Question

我正在尝试在我的页面上放置一个覆盖层以覆盖所有内容。问题是我的站点允许您更改主题颜色，而覆盖 div 不会从主题继承颜色。改变它的唯一方法是使用背景色:rgba( x, y, z, 1.0)

这是我的 overlay 的 CSS

.bio-overlay {
    position: fixed; /* Sit on top of the page content */
    display: block; 
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2048; 
    cursor: pointer; /* Add a pointer on hover */}

有没有办法用 css 做到这一点？如果不是，我会选择一些聪明的 javascript。谢谢

Answer 1

理论上，如果主题是基于类的，您可以窃取，甚至制作另一个仅附加背景颜色的类，并将其也应用于叠加层。这样一来，如果主题发生变化，叠加颜色也会发生变化。

.backgroundColor {
    background-color: rgba(x, y, z, 1.0);
}

---

<div class="bio-overlay backgroundColor">
    Content
</div>

另一种解决方案是，如果叠加层是主题的子项，您可以选择叠加层并以此方式为其应用背景色。

.themeClass .bio-overlay {
    background-color: rgba(x, y, z, 1.0);
}

这基本上会重载 .bio-overlay 类，如果 themeClass 是父类，它还会应用背景色。

编辑

---

回答您的评论，是的。在你编辑的样式表中，做这样的事情......

.whatevertheme .bio-overlay {
    background-color: _whatever_;
}
.whatevertheme2 .bio-overlay {
    background-color: _whatever2_;
}
....

样式在什么文件中并不重要，重要的是它包含在页面中。正如我在评论中所说，唯一真正的缺点是您会破坏主题分离。