隱藏的背景之上的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

回答

相關問題