Question

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

例如：

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

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

div sub将始终将背景颜色继承为白色。但是有没有一种方法（解决方法）在CSS中指定sub不应该继承白色？我读过CSS不允许这样做，但有没有解决这个问题呢？

Answer 1

你要问的是身体上有一个背景图像，身体包含一个白色背景颜色的div。

然后你想在这个div中看到一个看到背景图像的div？这是不可能的。

有一种方法可以达到你想要的效果，理论上你可以给'透视'div提供与身体相同的背景图像，然后通过jQuery读取坐标（或者如果div总是在你可以用css做同样的点你可以定位这个背景图像，使它与身体的图像重叠。这样看起来好像内部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/

Answer 2

这无论如何都不可能，无论是CSS还是JS也

Answer 3

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

Answer 4

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

请记住将要查看的div设置为背景：css中的透明。

Answer 5

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

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

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

嵌套div的背景颜色

5 个答案: