CSSの背景カット

Question

これは私のコードです。の本文には背景イメージがあり、#contは白である必要があります。しかし私はdiv要素を、私がボディの背景画像を見ることができるように透明にしたい。それを行うことができる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>

Answer 1

は、スニペットが更新されます。ここでは

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

Answer 2

あなたのdiv要素に背景画像を追加し、透明であることの錯覚を与えるために、バックグラウンド位置で遊ぶことができます。

JavaScriptを使用している場合、要素のx/y位置を取得してCSSを動的に調整できます。

Answer 3

それを確認します - ここ

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>