css - 如何让SPAN没有背景

Question

我有以下 HTML 代码:

<div id="bg">
    <span id="topnav">
    About Us | Contact Us | Media Room | Events | Career Opportunities
    </span>
    <input type=text size=25 id=insidebgtext />
</div>

CSS代码:

#bg {
    position: absolute;
    background: url('bg.png');
    height: 50px;
    width: 100%;
    z-index: 1;
}
#insidebgtext {
    position: absolute;
    top: 25%;
    right: 20%;
    background-color: #FFFFFF;
    z-index: 2;
}
#topnav {
    position: absolute;
    top: 40%;
    left: 20%;
    z-index: 5;
    color: #FFFFFF;
    font-family: Verdana, Tahoma;
    font-size: 11px;
}

我没有为 span 设置背景，但为什么 span 继承了页面的红色背景颜色而根本没有任何背景？

Answer 1

bg 是您的 span 的父级。因此，如果您为父级 bg 提供背景，而没有为 child 提供任何背景，则子级会自动使用父级的背景色。

如果您不想为 span 使用相同的背景，您需要提供其他颜色。 Background :none 在这种情况下将不起作用。

你可以这样理解。假设父层有 background:red 并且子层位于其上并且没有背景，在这种情况下，子层的背景将自动变为红色。

所以你必须放一个 background-color 的 child ，它看起来像这样没有背景

#topnav {
  background:#FFF
}

JS Fiddle Demo