css - CSS背景颜色：设置bg颜色后透明

Question

使用 CSS，我想在其父 div 已设置颜色之后设置背景透明。

HTML

<div id="content">
    <div id="nobackground">This background is transparent</div>
    <div>This is not transparent</div>
</div>

CSS

html,body{
    background-image:url("http://www.thomaslovgren.com/wp-content/uploads/spaceship1.png");
}
#content{
    background-color:#F00;
}
#nobackground{
    background-color:transparent;
}

http://jsfiddle.net/7HfJa/1/

一个可能的解决方案：

#content{
}
#content div:not(#nobackground){
    background-color:#F00;

http://jsfiddle.net/7HfJa/4/

但是，有没有更好的好看的解决方案，比如对 div 的单个语句background-color:transparent？

Answer 1

使您的选择器更具体：

#content #nobackground {
    background-color:transparent;
}

Answer 2

我想你可以这样做：http: //jsfiddle.net/8c54H/

div#nobackground ~ div {
    background-color: #ff0000;
}

虽然假设红色 div 遵循透明 div

Answer 3

你不能用你拥有的 HTML 来正确地做你想做的事。如果不重新声明相同的背景，您不能让内容框中的某些内容显示该框后面的某些内容的背景。

最好只是移动 HTML，以便“透明”元素只是在没有背景的容器中。

如果你想用你拥有的 HTML 来伪造它，你可以尝试这样的事情：

http://jsfiddle.net/PxKy8/2/

它只是在内容周围放置一个边框，并在实际需要它的元素上放置一个背景。

#content{
    border:5px solid #F00;
}
#nobackground {
}
.redbg {
   background-color:#F00;
}

和 HTML

<div id="content">
    <div id="nobackground">This background is transparent</div>
    <div class="redbg">This is not transparent</div>
</div>

编辑：你想完成什么？如果您希望它看起来像上一个示例，为什么不这样：

http://jsfiddle.net/f4qZP/