bootstrap.min.css在不需要的地方设置透明度

Question

我在页面底部有一个小的聊天框，该聊天框似乎是从bootstrap.min.css继承CSS样式的，并且该聊天框是透明的，这很麻烦，因为页面上的基础文本显示出来了，更糟糕的是，是页面上的超链接覆盖了聊天框中用于打开，关闭和提交消息的可单击区域。

我尝试将CS​​S样式添加到聊天框中以实现不透明度和rgba。甚至尝试添加背景图片，但无效。

此后，我修改了聊天框，以显示不使用bootstrap.min.css的其他站点中的iFrame。

但是，即使iFrame页面也受到透明度的影响。我可以在bootstrap.min.css中删除透明度设置，但这不能解决更大的问题...我打算在多个站点上使用此聊天框，并且可能无法控制站点的CSS。

因此，我需要一种方法来仅针对聊天框覆盖父站点的CSS。

如果这不可能，那么我可以从bootstrap.min.css中清除在我自己的网站上使用的透明性。但是，我确实想知道这种透明在这里毫无用处的意义是什么……

Answer 1

这是Z索引问题，在集成iframe时，在z-index: 2000; div上应用chatbox（或任何数字，只要位于顶部即可），这样您的聊天框仍将保持在前面。

Answer 2

由于您尚未发布任何代码，所以不确定是否尝试过此代码，但是您可以使用!important值在自定义CSS中覆盖Bootstrap的样式。例如： background-color: white !important;