隐藏的背景之上的div

我不能很找到一种方法，或者即使它可能做到这一点：隐藏的背景之上的div

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

我希望孩子div来隐藏父DIV的背景，但展示身体的背景。

来源

2015-02-24 Marvin

基本上，父母有一个漏洞呢？你可以用一个非常大的边框来尝试它，或者将子div设置为网站背景，通常#fff/white – AlexG 2015-02-24 10:22:01

孩子应该是父div中的洞，就像身体背景的窗口。 “面具”就像效果一样。 – Marvin 2015-02-24 10:27:57

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 
);

的好处此方法是，你不必到另一个背景图像添加到孩子，也不必担心定位。

来源

2015-02-24 10:54:22 Sirence

由于没有重复背景和避免定位问题因素，我将此投票作为正确答案。 – Marvin 2015-02-24 10:56:42

然后，你必须添加相同的背景颜色：到你身上的孩子。

或者使用JS或jQuery动态创建它，因此它设置了一个带有id或class的div，使其具有与主体相同的样式背景。但最简单的方法是在两者上设置相同的颜色。从我的评论

来源

2015-02-24 10:22:57 Djip

身体背景有一个图像，将不可能与小孩div对齐。我不能使用纯色。 – Marvin 2015-02-24 10:27:16

解决方案与各地家长边框：http://jsfiddle.net/82k0767b/

CSS：

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

来源

2015-02-24 10:26:58 AlexG

请注意，我正在使用图像作为背景。 – Marvin 2015-02-24 10:30:12

然后你可以看看这个：http://www.w3schools.com/cssref/css3_pr_border-image.asp但我从来没有尝试过自己:) – AlexG 2015-02-24 10:37:42

这不是我所需要的，但谢谢你的链接。 – Marvin 2015-02-24 10:51:24

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

background: fixed;

http://jsfiddle.net/x4cr507a/

来源

2015-02-24 10:38:04 johanthuresson

这是我寻找的效果，我需要看看我是否可以将它应用于我的案例。谢谢。 – Marvin 2015-02-24 10:50:52

使得这款概念：http://jsfiddle.net/8k4Lore4/1/

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

只是要与你将使用相同的图像背景的身体和孩子的背景。

希望这将帮助你:)

来源

2015-02-24 10:47:12 kgam

隐藏的背景之上的div

回答

相关问题