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/

但是，有没有更好看的解决方案像对background-color:transparent这样的div的单个陈述？

Answer 1

使您的选择器更具体：

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

Answer 2

您无法使用自己的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/

Answer 3

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

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

虽然假设红色div跟随透明div

CSS background-color：设置bg颜色后透明

3 个答案: