CSSで透明の薄皮をページに設置したい場面があります。たとえば、Javascriptによる小窓を表示した場合に、その下の要素を操作させたくない場合などです。
ここでいう透明の薄皮は、見えないけれど存在して、下にあるフォームやアンカーテキストを疑似的に無効化します（実際はTabを使ってフォームやアンカーをコントロールすることは可能です）。
ページ全体を覆うものであれば、
<div id="blind"></div>
を設置して、
#blind {
position: fixed;
z-index: ○○;
width: 100%;
height: 10000px;
top: 0;
left: 0;
background-color: transparent;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
このようなスタイルを定義すればOKです。z-indexが必要な場合は適切に設定してください。
ただし、fixedは古いIEでは無効なため、古いIEに対応したい場合は別途指定が必要です。
また、Android2.3では、viewportの指定にuser-scalable=noを指定するなどの対処が必要です。
と、これで問題ないように思えますが、IE10以下ではbackground-color:transparentの要素が実際に「透ける」という厄介な解釈をします（ただしborderなどがあると挙動が変わる）。
そこで、
background-color: transparent;
を
background-color: rgba(0, 0, 0, 0);
に置き換えるとIE10とIE9で狙った効果が得られます。
IE8以下に対応する場合は、rgbaを解釈できないため透明な1x1pxの画像を使用することになり、
background-color: rgba(0, 0, 0, 0);
を
background-image: url(transparent.gif);
に置き換えます（1x1pxの透明な画像（transparent.gif）を作ってください）。
#blind {
position: fixed;
z-index: ○○;
width: 100%;
height: 10000px;
top: 0;
left: 0;
background-image: url(transparent.gif);
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
IE8のシェアはまだまだ無視できるレベルではないので、クロスブラウザを考えて透明なdivを作る場合は、結局透明なGIFが必要になります。