CSS背景切割

這是我的代碼，正如你所看到的機體有一些背景圖像，並且#cont應該是白色的。但我希望我的div元素透明，可以看到身體背景圖像。任何可以做到這一點的CSS技巧？CSS背景切割

body { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: url(image.png); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
#cont { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    background-color: white; 
 
} 
 
#cont div { 
 
    margin: 20px; 
 
    border: 1px solid gray; 
 
    padding: 0; 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
}

<div id="cont"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

來源

2016-11-14 Pero B

你撥弄不顯示問題。 –

將image.png添加爲鏈接，以便我們可以看到它。 –

我知道，但我不希望我的div元素像#cont背景那樣變白。我希望他們能夠「剪切」白色背景並顯示身體背景圖像 –

這裏是更新的片段：

body { 
    margin: 0; 
    border: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    background-image: url(https://placekitten.com/1000/1000); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; /*include this*/ 
    background-attachment: fixed; /*include this*/ 
} 
#cont { 
    margin: 0; 
    border: 0; 
    padding: 0; 
    background-color: white; 
} 
#cont div { 
    margin: 20px; 
    border: 1px solid gray; 
    padding: 0; 
    width: 50px; 
    height: 50px; 
    /*float: left; replaced by display inline-block*/ 
    display: inline-block; /*include this*/ 
    background: url(https://placekitten.com/1000/1000) center center no-repeat; /* <<< same body image*/ 
    background-size: cover; /*include this*/ 
    background-attachment: fixed; /*include this*/ 
}

下面是完整的例子：jsbin

來源

2016-11-14 20:21:35 jotavejv

偉大的思想有...學到了新的東西:) – kukkuz

您可以將背景圖片添加到您的div元素，並與背景位置發揮給人一種透明的錯覺。

如果您使用JavaScript，您可以獲取元素的x/y位置並動態調整css。

來源

2016-11-14 15:48:20 Poney

是的，這確實讓我想起了它，但似乎太多的調整要做。我希望我可以用CSS解決它 –

我認爲這是你可以達到這種行爲的唯一方法。 – GiuServ

或者你可以玩邊框。你讓.cont是透明的，但是你可以用0填充將白色邊框添加到頂部和底部。然後你爲你的div添加左右邊框。 – Poney

檢查它： -

body { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
#cont { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    opacity: 0.3; 
 
} 
 
#cont div { 
 
    margin: 20px; 
 
    border: 1px solid gray; 
 
    padding: 0; 
 
    background-color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
    background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"); 
 
    background-attachment: fixed; 
 
    background-position: top center; 
 
}

<div id="cont"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

來源

2016-11-14 15:58:51

好吧，我想你錯了 - 它的另一種方式 – kukkuz

你可以使用不透明度增加/減少來改變透明度。 –

你能告訴我一個jsfiddle嗎？ –

CSS背景切割

回答

相關問題