覆盖蒙版偏离中心

我正在尝试创建覆盖框并希望整个背景被蒙上。覆盖蒙版偏离中心

但是，蒙版只覆盖页面的主体。我想让面具延伸到页面的边缘和顶部。

有没有办法手动定位掩码来覆盖整个页面？

谢谢。

CSS：

body 
{ 
    background-color: #C75656; 
    text-align:center; 
    font-size:16px; 
    font-variant:small-caps; 
    font-family:Lucida,Helvetica,sans-serif; 
    font-weight:500; 
    text-decoration: none; 
    position: absolute; 
    left: 50%; 
    width: 780px; 
    margin-left: -390px; 
} 
#middleContainer { 
    width:780px; 
    margin: 5px auto; 
    padding: 10px 0; 
} 
.box { 
    background:white; 
    border-style:solid; 
    border-width:1.5px; 
    border-color:#071419; 
    border-radius: 12px; 
    -moz-border-radius: 12px; 
} 
.modal { 
    background-color:#fff; 
    display:none; 
    width:700px; 
    padding:15px; 
    text-align:left; 
    border:2px solid #333; 

    opacity:0.8; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    -moz-box-shadow: 0 0 50px #ccc; 
    -webkit-box-shadow: 0 0 50px #ccc; 
    } 

.modal h2 { 
    margin:0px; 
    padding:10px 0 10px 45px; 
    border-bottom:1px solid #333; 
    font-size:20px; 
    }

HTML：

<!DOCTYPE html> 
<html lang='en'> 
<head> 
<title>mySITE</title> 
<!-- Meta tags go here --> 
<!-- Links to Icon, favicon, css, jquery, ajax, etc. --> 
<link rel='stylesheet' type='text/css' href='default.css' /> 
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 
<script> 
$(document).ready(function() { 
    var triggers = $(".modalInput").overlay({ 
     mask: { 
     color: '#ebecff', 
     loadSpeed: 200, 
     opacity: 0.5, 
     }, 
    }); 

    $("#login form").submit(function(e) { 
     triggers.eq(1).overlay().close(); 
     var input = $("input", this).val(); 
     triggers.eq(1).html(input); 
     return e.preventDefault(); 
    }); 
    }); 
</script> 
</head> 

<body> 
<span><h1>my<font color="red">SITE</font></h1></span> 
<a class="modalInput" rel="#login">Login</a> 

<div id="middleContainer" class="box"> 
<div id="title">Content</div> 
</div> 

<div class="modal" id="login"> 
    <h2>Login or Regester.</h2> 
    <form> 
    <input /> 
    <button type="submit"> OK </button> 
    <button type="button" class="close"> Cancel </button> 
    </form> 
    <br /> 
</div> 


</body> 
</html>

来源

2013-01-31 user985637

请提供您的CSS和HTML代码 – keeg

将这个在您的文档

<style type="text/css" media="all"> 
    .mask {  
     position: absolute; 
     top: 0; left: 0; 
     width: 100%; 
     height: 2000px; 
     background: black; 
     opacity: 0.5; 
    } 
    </style>

的头，然后把

<div class="mask"></div>

任何地方在你的HTML，但我会把它放在顶部或底部。因为它绝对定位，所以它并不重要。

来源

2013-01-31 17:03:35 dezman

感谢您的答复。我会在哪里添加这个？我无法获得任何CSS应用于面具。请查看我上面发布的完整代码。 – user985637

看看我的更新！ – dezman

我将绝对值改为固定值，然后覆盖整个页面。但是现在当页面加载时出现掩码。你知道为什么会发生吗？ – user985637

这是我在用我所有的项目

<style> 
    .mask { 
     position:fixed; 
     top:0px; 
     bottom:0px; 
     left:0px; 
     right:0px; 
     z-index:1000; 
     opacity: 0.5; 
    } 
    .overlay { 
     position: absolute; 
     width: 300px; 
     height: 200px; 
     top: 100px; 
     left: -50%; 
     margin-left: -150px; 
     background: white; 
     z-index: 1001 
    } 
</style> 

<div class="mask"></div> 
<div class="overlay"></div>

来源

2013-01-31 17:18:59 jibin

覆盖蒙版偏离中心

回答

相关问题