嵌套的div背景色

Question

嵌套的div背景色

5

一个子div是否可能不继承父div的背景颜色，而是继承body标签的背景颜色？

例如：

<body>
  <div id="main">
    <div id="sub">
       some content
     </div>
  </div>
</body>

body {
  background-image: url("blah");
}
#main {
  background-color: white;
}

标签的子元素会继承白色背景颜色。但CSS中有没有指定子元素不继承白色颜色的方法（解决方法）？我了解到CSS不支持此操作，但是否有任何解决方案？

- coder

告诉我们您想以图形方式实现什么。也许有一个显而易见的解决方案。我认为您想要类似于背景图像的东西，带有白色边框的 div，并在其中放置一个“透明”的 div，其中包含先前的背景图像。 - Benjamin Crouzier

5个回答

0

或者，您可以考虑在样式表中使用CSS变量，如下所示...

@variables {
    bodyColor: #999;
    divColor: #DDD;
}

body {  
    background-color: var(bodyColor);  
}  
#outerDiv {  
    background-color: var(divColor); 
} 
#innerDiv {  
    background-color: var(bodyColor);
}

- Robin Maben

我只用过这个来设置 background-color，但是同样的方法也可以应用到其他属性上。 - Robin Maben

0

无论是使用CSS还是JS，都无法实现这个。

- anil tiwari

不可能，但可能存在某种黑客/解决方案。Newbie_python提出的方式从未可能，但像Kokos所回应的那样，可能以不同的方式实现。 - anil tiwari

0

如果你只是用main来创建一个边框，即除了sub之外没有其他内容，那么也许你可以使用border代替？

- Phil Powell

0

或者...使用PNG背景图片，并使其特定区域变为“透明”。

只需记得在CSS中将您想要透明的div设置为background:transparent。

- Graeme Leighfield

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kokos · Accepted Answer

您的问题是想在body上放置一个背景图片，然后在这个body中有一个白色背景颜色的div。接下来您想要在这个div内部放置一个可以看到背景图片的div，但这是不可能的。

理论上，您可以通过给“可见”div设置与body相同的背景图像，并通过使用jQuery读取坐标（或者如果该div总是在相同的位置，可以使用css），将此背景图像定位，使其重叠在body的图像上，从而实现内部div充当一种窗口的效果，达到您所需的效果。

类似于这样：http://jsfiddle.net/aFpAX/ jQuery方法 您可以使用position()获取窗口div的坐标，然后使用这些值设置background-position。

$(function(){

    var pos = $('#window').position();
    $('#window').css('background-position','-'+pos.left+'px -'+pos.top+'px');

});

您可以在此处查看其实际应用： http://jsfiddle.net/aFpAX/2/