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;
}

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

Answer 1

bg是您span的父级。因此，如果您向父bg提供背景而不向child提供任何背景，则子将自动使用父级的背景颜色。

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

你可以这样理解。假设有一层父母有background:red并且孩子放在它上面且没有背景，那么孩子的背景会自动变红。

所以你必须把background-color的孩子看作没有这样的背景

#topnav {
  background:#FFF
}

<强> JS Fiddle Demo

Answer 2

不要在第一时间给它背景:)

* {
    background-color: #CCCCCC;
    padding: 0px;
    margin: 0px;
}

在使用全局选择器之前考虑两次，不要忘记

不是答案，只是提醒：）

Answer 3

这是因为子元素继承了其父元素的属性。

如果要删除它，则需要自己重置该元素的background属性。

span { #topnav would be in the place of span
   /* here */
}

正在应用父级（#bg）的背景：

background: url('bg.png'); // this line from #bg

如何使SPAN没有背景

3 个答案: