Question

我正在尝试在我的页面上添加一个覆盖所有内容的叠加层。问题是我的网站允许您更改主题颜色，并且叠加div不会继承主题的颜色。更改它的唯一方法是使用background-color：rgba（x，y，z，1.0）

这是我的叠加

的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_; } ....

风格所处的文件无关紧要，重要的是它包含在页面中。正如我在评论中所说，唯一真正的缺点是你会打破主题分离。

Css覆盖与从主题继承的背景颜色

1 个答案: