覆蓋蒙版偏離中心

我正在嘗試創建覆蓋框並希望整個背景被蒙上。覆蓋蒙版偏離中心

但是，蒙版只覆蓋頁面的主體。我想讓面具延伸到頁面的邊緣和頂部。

有沒有辦法手動定位掩碼來覆蓋整個頁面？

謝謝。

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

覆蓋蒙版偏離中心

回答

相關問題