Question

我有一个css文件，其中包含以下css元素：

.ms-webpart-chrome {
    background-color: white;
}

我想让它透明而不是白色，同时我想要这个css元素，因为它是因为它是一个全局的css而且有些页面正在使用它。

所以我想我可以使用它来阻止它。

这就是它在html中的样子，这个div类是自动生成的，这意味着我无法改变或做任何事情。

<div class="ms-searchCenter-main">
            <div class="ms-webpart-zone ms-fullWidth">
        <div id="MSOZoneCell_WebPartWPQ1" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
            <div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">

所以基本上我需要这个，因为它是因为我不想改变它或删除它：

.ms-webpart-chrome {
    background-color: white;
}

我需要创建一个新的并且使用！important与inherance。

感谢任何形式的帮助

注意：我试过以下：

.ms-searchCenter-main .ms-webpart-chrome
{
background-color: transparent !important;
}

但它没有用

Answer 1

您当然可以将背景颜色指定为“透明”，因为这是CSS规范中的默认值（请参阅reference page at w3schools.com）。

如果您的目标是使用“ms-webpart-chrome”类的所有元素使背景颜色透明，请尝试添加更多选择器以增加新规则的权重：

body div.ms-webpart-chrome {
    background-color: transparent !important;
}

设置“background：none;”也是一种选择。您可以尝试添加两者。

如果您的新规则遵循其他规则（不是直接，在订单之后），那会更好。另外，检查是否有任何子元素正在拾取背景。

虽然IE有开发人员工具，但我强烈建议使用Firefox + Firebug + DOM Inspector + Web Developer Toolbar作为标准测试套件。您可以轻松遍历DOM以查看是否有任何子元素应用了背景，以及在页面上实时测试不同的CSS规则。

Answer 2

您不能将背景颜色指定为透明，因为透明不是颜色。但是，您可以使用background: none !important;来实现它。默认情况下，元素没有背景颜色，因此只需将其恢复为默认值（无），它将是透明的。

看看这个demo here。我已将背景设置为顶部的红色，但随后以background: none;向下覆盖它。这使它透明。红色边框显示元素的位置

通过继承css覆盖css元素

2 个答案: