O efeito translúcido da camada de máscara é basicamente alcançado usando plug-ins. Deixe -me compartilhar com você o uso de JS nativo para obter efeito de máscara translúcida. Amigos interessados podem se referir a ele. Espero que seja útil que você esteja familiarizado com o JS nativo.
<div> <h4> <pan> Registre -se agora </span> <span> feche </span> </h4> <p> <belt> nome de usuário </elabel> <input type = "text" onmouseover = "this.style.border = '1px sólido #f60'" onfoucs = "this.style.border = '1px #f60'" Onfoucs = " onblur = "this.style.border = '1px sólido #ccc'"/> </p> <p> <breting> senha </elabel> <input type = "senha" onmouseover = "this.style.border = '1px Solid #f60'" onfoucs = "this.style.border = '1px #' f60 '" Onfoucs = " onblur="this.style.border='1px solid #ccc'" /> </p> <p> <input type="submit" value="register" /> <input type="reset" value="reset" /> </p> </div> <div ></div><!-- Mask layer div--> <script type="text/javascript"> var myAlert = document.getElementById ("Alert"); var myMask = document.getElementById ('Mask'); var reg = document.getElementById ("content"). getElementsByTagName ("a") [0]; var mclose = document.getElementById ("Close"); reg.OnClick = function () {myMask.style.display = "bloqueio"; myalert.style.display = "bloco"; myalert.style.position = "absoluto"; myalert.style.top = "50%"; myalert.style.left = "50%"; myalert.style.margintop = "-75px"; myalert.style.marginleft = "-150px"; document.body.style.overflow = "Hidden"; } mclose.OnClick = function () {myalert.style.display = "nenhum"; myMask.style.display = "nenhum"; } </script> </body> </html>Tampa de tela inteira
<! DOCTYPE html> <estilo> #mask {position: corrigido; largura: 100%; topo: 0px; esquerda: 0px; _Position: absoluto; _top: expressão (documentElement.scrolltop); Antecedentes: RGBA (0,0,0,0,5); Antecedentes: transparente/9; Filtro: Progid: dIMAGETRANSForm.microsoft.gradient (startColorstr =#80000000, endColorstr =#80000000); Exibir: nenhum;}#Mask_td {text-align: Center;} </style> <img src = "http://web-tinker.com/images/themagicConch.jpg" id = "img"/> <table id = ""> <tr> <td id = "Mask_td" isie = Navigator.UserAgent.match (/msie (/d)/i); isie = Isie? Isie [1]: ISIE; // Declare a variável var iMg, mask; // obtenha o elemento img = document.getElementById ("img"); máscara/document. de Mask Mask.SetSize = function () {// Obtenha a largura da área visível do documento e defina -o como máscara var de = document.documentElement; Mask.style.width = de.clientWidth+"px" Mask.style.Height = de.clientHeight+"px" Mask.style.Height = de.clientHeight+"px";}; // Adicione o método Method Mask.show = function () {// Ocultar o documento do Scrollar [Isie <Isie <? ] .style.overflow = "Hidden"; // calcule o tamanho da máscara de máscara.SetSize (); // Mostrar máscara.style.display = isie == 6? "Block": "tabela";}; // Adicione o hide método máscara.hide = function () {// Mostrar documento de scrollbar da página [ISIE <9? "DocumentElement": "Body"] .style.overflow = ""; // limpe o conteúdo dentro de máscara.td.innerhtml = ""; // ocultar máscara.style.display = "nenhum";}; // Adicione o método de append máscara.append = function (e) {// Adicione conteúdo no máscara td, você mask.td.appendchild (e);}; // clique em máscara para fechar máscara não clicar em máscara. (e.Target || E.SrCelement) == Mask.td && Mask.hide ();}; // Adicione o tamanho da máscara quando o tamanho do formulário muda de window.onResize = function () {mask.setsize ();}; // Clique no evento da imagem IMG.Click = function () {) {/ Crie uma imagem // defina o endereço da imagem o.src = img.src; // Adicione Content Mask.append (O); // Mostrar máscara de máscara.show ();}; </script>