CSSとオーバーレイの穴
実際のウェブサイトが透けて見えるように、オーバーレイに穴を開けることはどのようにして可能ですか？
たとえば、このフィドルでは： http://jsfiddle.net/qaXRp/
<div id="center">が見えるように<div id="underground">を透明にしたい。これをCSSでのみ行うことは可能ですか、それともJavaScriptを使用する必要がありますか？
いいえ。これは不可能です、ほとんどのブラウザでは不可能です。
CSSマスキング
新しいブラウザのみに関心がある場合は、maskingを使用できます。
仕様： http://www.w3.org/TR/css-masking/
互換性： http://caniuse.com/css-masks
ボーダー/アウトライン
似たような効果を作成し、それらの色をborderに設定して似たように見せたい場合は、outlineまたはtransparentcssプロパティを使用することもできます。
絶対位置
位置を使用することもできます：
<div z-index:20></div>
<div z-index:10>
<div z-index:30> // top div is over child of this one
</div>
透明性と要素
http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
http://css-tricks.com/examples/NonTransparentOverTransparent/
-これはあなたが求めているものではありませんが、あなたを助けることができます:)
はい、これ効果が可能です。
拡散半径が非常に大きいcssボックスシャドウを使用します。
box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
.hole {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 150px;
box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper. Mea ei aeque feugiat, cum ut utinam conceptam, in pro partem veritus molestiae. Omnis efficiantur an eum, te mel quot perpetua. Ad duo autem dolore, vocent lucilius te cum, ut duo quem singulis.</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci. Ei eam ipsum dissentiunt. Ei vel accusam dolores efficiantur.</p>
<div class="hole"></div>これはある程度可能です。
オプション1：半透明の境界線でカバーする要素
body, html{
height:100%;
width:100%;
padding:0;
margin:0;
background:blue;
}
#overlay{
height:100%;
width:100%;
position:fixed;
border:50px solid rgba(255,255,255,.3);
box-sizing:border-box;
top:0;
left:0;
}<div id='overlay'></div>
content content content contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontentオプション2：中央の要素が完全に透明な3x3グリッド
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
position: fixed;
background: blue;
}
#overlay {
display: table;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
opacity: 0.9;
background: grey;
}
.row:nth-child(2) .cell:nth-child(2) {
opacity: 0;
}<div id='overlay'>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'> </div>
<div class='cell'> </div>
<div class='cell'> </div>
</div>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
</div>
content content content contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent
contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent
contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontentこれは不可能です。しかし、とにかくあなたは国境のトリックをすることができます：#overlay自体は透明ですが、境界線は透明ではありません。フィドルを参照してください： http://jsfiddle.net/qaXRp/2/