Question

我无法找到一种方法来做到这一点，即使它可能：

<body> has a background image
<div parent> has a background image
<div child></div>  has no background 
</div>

我希望子div隐藏父div背景，但显示正文背景。

Answer 1

我的评论解决方案，其中包含父级边框：http://jsfiddle.net/82k0767b/

的CSS：

.parent{
    border: 20px solid #ccc;
    display: inline-block;
}
.child{
    height: 50px;
    width: 100px;
}

Answer 2

如果您在背景图像上使用固定定位，我想这就是您正在寻找的效果。

background: fixed;

http://jsfiddle.net/x4cr507a/

Answer 3

http://jsfiddle.net/WM9Za/9/

您可以使用剪辑路径剪切矩形，如我的小提琴所示。您将能够通过它看到背景图像。

-webkit-clip-path: polygon(
    0 0,
    100px 0,
    100px 75px,
    75px 75px,
    75px 125px,
    125px 125px,
    125px 75px,
    100px 75px,
    100px 0,
    200px 0,
    200px 200px,
    0 200px,
    0 0
);

这种方法的好处在于您不必为孩子添加另一个背景图像，也不必担心定位。

Answer 4

然后你必须像对待身体一样为孩子添加相同的背景颜色。

或者使用JS或jQuery动态创建它，因此它设置一个id或类的div，以具有与正文相同的样式背景。但最简单的方法是在两者上设置相同的颜色。

Answer 5

将此作为概念：http://jsfiddle.net/8k4Lore4/1/

body {background: green;}    
.parent {background: red; width: 500px; height: 500px; padding: 50px;}    
.child {background: green; width: 500px; height: 400px;}

只需使用您将使用的相同图像背景为身体和儿童制作背景。

希望这会对你有所帮助:)。

在顶部div上隐藏较低div的背景

5 个答案: