この効果は非常に頻繁に使用されており、人々はしばしばこの質問をするので、私はそれを記事に書かなければなりません。次回誰かが尋ねるときは、この記事のURLを捨ててください。この効果は非常に簡単なので、説明しすぎません。コードのコメントを詳細に見ると、それを理解できます。以下はすべてのコードであり、HTMLにコピーすることで実行できます。
<！doctype html> <style> #mask {position：sixt; width：100％;上：0px;左：0px; _ポジション：絶対; _top：expression（documentlement.scrolltop）;背景：RGBA（0,0,0,0.5）;背景：透明/9;フィルター：progid：dmimagetransform.microsoft.gradient（startcolorstr =＃80000000、endcolorstr =＃80000000）;表示：なし;}＃mask_td {text-align：center;} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img"/> <table id = "mask" "> <tr> <td id =" mask_td "> </td>> < var isie = navigator.useragent.match（/msie（/d）/i）; isie = isie？isie [1]：isie; //変数var img、mask; //要素を取得しますimg = document.getElementById（ "img"）; mask = document.getElementbyId（ "mask"）; mask.td = document.getElementById（ "mask_td"）; // mask.setsize = function（）{// bir documentelethに設定して、document（// mask.style.width = de.clientwidth+"px" mask.style.height = de.clientheight+"px" mask.style.height = de.clientheight+"px";}; // ] .style.overflow = "hidden"; // Mask Mask.Setsize（）のサイズを計算します。 // show mask.style.display = isie == 6？ "block"： "table";}; // Hided method mask.hide = function（）{//ページscrollbar document [isie <9？ "documentlement"： "body"] .style.overflow = ""; // mask.td.innerhtml = ""内のコンテンツをクリアします; // mask.style.display = "none";}; //付録メソッドmask.append = function（e）{//マスクTDにコンテンツを追加する、mask.td.appendchild（e）;}; // mask.onclick = function（e）{// coshe of of eaves of eaves of of eaves of of the eaves of of the eaves of the event of the eave of of the evers of eas of the evers of of ecsion （e.target || e.srcelement）== mask.td && mask.hide（）;}; //フォームサイズがwindow.onresize = function（）{mask.setsize（）;}; //画像イベントimg.onclick = function（）{）{//クリックします。 //画像アドレスを設定しますo.src = img.src; // Content Mask.Append（o）; // mask mask.show（）;}; </script>を表示しますこの効果に困難はなく、最も難しいのはおそらく半透明の実装です。 CSS3の不透明度とIEのアルファの両方は、半透明性を達成できますが、それは要素全体の半透明性です。その方法を使用すると、子要素も半透明であることを意味するため、要素全体ではなく、透明度を背景に設定する必要があります。 CSS3では、RGBAを直接使用して設定できます。 IEにはそのような方法はありませんが、勾配フィルターも透明度をサポートするため、代わりに勾配フィルターを使用できます。また、IE9では、CSS3の透明度とフィルターの透明度の両方と互換性があります。両方を使用すると、ページの透明性が正しくありません。そこで、IE9の透明効果の1つをブロックしました。
別の問題は、IE6と互換性があることです。 IE6は固定をサポートしていないため、絶対的で動的に設定された上部を使用して互換性を持たせる必要があります。次に、マスクサイズの計算の問題があります。ブラウザの違いもあります。実際、この効果のブラウザの違いは非常に大きいですが、いくつかの小さな問題が見られると、それについて長い間話す必要がないことを理解するでしょう。