Dieser Effekt wird sehr häufig verwendet, und die Leute stellen mir diese Frage oft, daher muss ich sie in einen Artikel schreiben. Wenn jemand das nächste Mal fragt, werfen Sie einfach die URL dieses Artikels weg. Dieser Effekt ist sehr einfach, daher werde ich ihn nicht zu sehr erklären. Wenn Sie sich die Code -Kommentare im Detail ansehen, werden Sie sie verstehen. Das Folgende ist der gesamte Code, der durch Kopieren in HTML ausgeführt werden kann.
<! DocType html> <style> #mask {Position: behoben; Breite: 100%; oben: 0px; links: 0px; _position: absolut; _top: Expression (documentElement.scrolltop); Hintergrund: RGBA (0,0,0,0,5); Hintergrund: transparent/9; Filter: Progid: DimaMagetransform.Microsoft.gradient (startColorstr =#80000000, EndColorstr =#80000000); Anzeige: Keine;}#mask_td {text-align: center;} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img"/> <table id = "mask"> <tr> <tdd id = "mask_td"> </table> <tttd id = "mask_td"> </tbing> </table> <ttd id = "mask_td"> </tbing> </table> <ttd id = "mask_td"> </tble> </table> </mask_td "> </tbing> </table> <ttd id =" mask_td " Browser var isie = navigator.useragent.match (/msie (/d)/i); isie = isie? isie [1]: isie; // deklarieren Sie die variable var img, mask; // das Element erhalten img = document.getElementById ("img"); mask = document.getElementById ("mask"); mask.td = document.getElementById ("mask_td"); // Berechnen Sie die Größe der Maskenmaske. mask.Style.width = de.clientwidth+"px" mask.style.height = de.clientHeight+"px" mask.Style.Height = de.clientHeight+"PX";}; // Add der Show -Methode mask.show = function () {// das ScrollBar -Dokument [isie [9? " ] .Style.overflow = "Hidden"; // Berechnen Sie die Größe der Maskenmaske. SetSize (); // mask.Style.Display = isie == 6? "Block": "Tabelle";}; // Hinzufügen von Hide -Methoden mask.hide = function () {// Page ScrollBar -Dokument [isie <9? "Dokumentelement": "Body"] .style.overflow = ""; // den Inhalt in mask.td.innerhtml = "" löschen; // mask ausblenden. (E.Target || e.srcelement) == mask.td && mask.hide ();}; // Fügen Sie die Größe der Maske hinzu, wenn die Form der Formulargröße Fenster ändert. // Setzen Sie die Bildadresse o.src = img.src; // Inhaltsmaske hinzufügen.Append (o); // mask mask.show ();}; </script> anzeigenEs gibt keine Schwierigkeiten in diesem Effekt, und das schwierigste ist vielleicht die durchscheinende Implementierung. Sowohl die Opazität von CSS3 als auch Alpha von IE können Transluzenz erreichen, aber das ist die Transluzenz des gesamten Elements. Mit dieser Methode bedeutet auch, dass die untergeordneten Elemente auch durchscheinend sind, sodass wir die Transparenz auf den Hintergrund und nicht auf das gesamte Element einstellen müssen. In CSS3 können Sie RGBA direkt verwenden, um es einzustellen. Es gibt keine solche Methode in IE, aber Sie können stattdessen einen Gradientenfilter verwenden, da Gradientenfilter auch Transparenz unterstützen. Auch in IE9 ist es sowohl mit der Transparenz von CSS3 als auch mit der Transparenz des Filters kompatibel. Wenn beide verwendet werden, ist die Transparenz der Seite falsch. Also blockierten wir einen der transparenten Effekte in IE9.
Ein weiteres Problem ist, dass es mit IE6 kompatibel ist. IE6 unterstützt nicht fest, dass Fix nicht das Absolute und dynamisch eingestellt ist, um damit kompatibel zu sein. Dann gibt es das Problem der Maskengrößenberechnung. Es gibt auch einen Browserunterschied. Tatsächlich ist der Browserunterschied in diesem Effekt ziemlich groß, aber wenn Sie einige kleine Probleme sehen, werden Sie verstehen, dass es nicht erforderlich ist, weit darüber zu sprechen.