เอฟเฟกต์นี้ใช้บ่อยมากและผู้คนมักจะถามคำถามนี้ฉันดังนั้นฉันต้องเขียนลงในบทความ ครั้งต่อไปที่มีคนถามเพียงแค่ทิ้ง URL ของบทความนี้ เอฟเฟกต์นี้ง่ายมากดังนั้นฉันจะไม่อธิบายมากเกินไป หากคุณดูความคิดเห็นของรหัสในรายละเอียดคุณจะเข้าใจ ต่อไปนี้เป็นรหัสทั้งหมดซึ่งสามารถเรียกใช้งานได้โดยการคัดลอกไปยัง HTML
<! doctype html> <style> #mask {ตำแหน่ง: คงที่; ความกว้าง: 100%; ด้านบน: 0px; ซ้าย: 0px; _position: สัมบูรณ์; _top: นิพจน์ (DocumentElement.scrolltop); ความเป็นมา: RGBA (0,0,0,0.5); ความเป็นมา: โปร่งใส/9; ตัวกรอง: progid: dximagetransform.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> var isie = navigator.useragent.match (/msie (/d)/i); isie = isie? isie [1]: isie; // ประกาศตัวแปร var img, หน้ากาก; // รับองค์ประกอบ img = document.getElementById ("img"); mask = document.getElementById ("mask"); mask.td = document.getElementById ("mask_td"); // คำนวณขนาดของหน้ากาก mask.setsize = function () {// mask.style.width = de.clientWidth+"px" mask.style.height = de.clientheight+"px" mask.style.height = de.clientheight+"px";}; // เพิ่มวิธีการแสดงหน้ากาก ] .style.overflow = "ซ่อน"; // คำนวณขนาดของหน้ากากหน้ากาก Setsize (); // show mask.style.display = isie == 6? "block": "ตาราง";}; // เพิ่ม Hide Method Mask.hide = function () {// show page scrollbar document [isie <9? "documentElement": "body"] .style.overflow = ""; // ล้างเนื้อหาภายใน mask.td.innerhtml = ""; // ซ่อน mask.style.display = "ไม่มี";}; // เพิ่มวิธีการผนวกหน้ากาก. Append = function (e) {// เพิ่มเนื้อหาในหน้ากาก td คุณ mask.td.appendchild (e);}; // คลิกหน้ากากปิด mask.onclick = ฟังก์ชั่น (e) (e.target || e.srencement) == mask.td && mask.hide ();}; // เพิ่มขนาดของหน้ากากเมื่อขนาดของรูปแบบเปลี่ยนหน้าต่าง onResize = function () {mask.setsize ();}; // คลิกภาพเหตุการณ์ img.onclick = ฟังก์ชัน // ตั้งค่าที่อยู่รูปภาพ o.src = img.src; // เพิ่ม mask content.append (O); // show mask mask.show ();}; </script>ไม่มีปัญหาในเอฟเฟกต์นี้และสิ่งที่ยากที่สุดคือการใช้งานโปร่งแสง ทั้งความทึบของ CSS3 และอัลฟ่าของ IE สามารถบรรลุความโปร่งแสง แต่นั่นคือความโปร่งแสงขององค์ประกอบทั้งหมด การใช้วิธีนั้นหมายความว่าองค์ประกอบของเด็กนั้นโปร่งแสงเช่นกันดังนั้นเราจึงต้องตั้งค่าความโปร่งใสเป็นพื้นหลังไม่ใช่องค์ประกอบทั้งหมด ใน CSS3 คุณสามารถใช้ RGBA โดยตรงเพื่อตั้งค่า ไม่มีวิธีการดังกล่าวใน IE แต่คุณสามารถใช้ตัวกรองการไล่ระดับสีแทนเนื่องจากตัวกรองการไล่ระดับสียังรองรับความโปร่งใส นอกจากนี้ใน IE9 มันเข้ากันได้กับทั้งความโปร่งใสของ CSS3 และความโปร่งใสของตัวกรอง หากมีการใช้ทั้งสองความโปร่งใสของหน้าจะไม่ถูกต้อง ดังนั้นเราจึงปิดกั้นหนึ่งในเอฟเฟกต์โปร่งใสใน IE9
ปัญหาอีกประการหนึ่งคือมันเข้ากันได้กับ IE6 IE6 ไม่รองรับการแก้ไขดังนั้นเราจำเป็นต้องใช้ค่าที่แน่นอนและตั้งค่าไว้ด้านบนให้เข้ากันได้กับมัน จากนั้นมีปัญหาของการคำนวณขนาดหน้ากาก นอกจากนี้ยังมีความแตกต่างของเบราว์เซอร์ ในความเป็นจริงความแตกต่างของเบราว์เซอร์ในเอฟเฟกต์นี้ค่อนข้างใหญ่ แต่เมื่อคุณเห็นปัญหาเล็ก ๆ น้อย ๆ คุณจะเข้าใจว่าไม่จำเป็นต้องพูดถึงเรื่องนี้ในระยะยาว