CSS背景屬性

Question

當你在Facebook上，一個盒子的POS機，但其餘的整個背景點擊圖片得到由黑色透明層覆蓋。那是什麼效果？它可以使用CSS應用？

Answer 1

<a href="#">Open FancyBox</a> 
<div class="fancybox"> 
<div class="content"> 
    <div class="close">x</div> 
</div> 
</div>​ 

和jQuery：

$(".fancybox").hide(); 
$("a").click(function() { 
$(".fancybox").show(); 
}); 
$(".close").click(function() { 
$(".fancybox").hide(); 
}); 

CSS：

.fancybox { 
background-color:rgb(0,0,0); 
background-color:rgba(0,0,0, 0.7); 
width:100%; 
height:100%; 
position:absolute; 
top:0; 
left:0; 
} 
.content { 
    width:600px; 
    background:#fff; 
    margin:0 auto; 
    height:100%; 
    position:relative; 
} 
.close { 
    position:absolute; 
    font-size:22px; 
    top:2px; 
    right:15px; 
    font-family:Arial; 
} 
.close:hover { 
    cursor:pointer; 
}​ 

http://jsfiddle.net/YnQbY/1/

Answer 2

你可以使用這個插件：

//www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Answer 3

它當然可以使用CSS應用：

這裏是一個黑色的CSS覆蓋：

.overlay{ 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=80); 
} 

的z索引指示該覆蓋位於上述所有其它元件，這應該是在覆蓋頂部的元件（在Facebook上的圖像幀）必須具有的z-index與值1002或者更多。

的-moz不透明度使用FireFox，不透明度爲鉻，動物園，所述覆蓋疊加的不透明度...和所述過濾器是用於與IE的疊加。

我已經創建了一個類似的問題一個項目，我創建了一流的疊加，最初隱藏，並在按鈕按下時，能見度設置爲可見一個div。我已經把一個iFrame放在div覆蓋層之上（使用z-index 1002）。

這是我的疊加的CSS：

.black_overlay{ 
    display: none; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=80); 
} 

.white_content { 
    display: none; 
    position: absolute; 
    top: 15%; 
    left: 15%; 
    width: 70%; 
    height: 70%; 
    padding: 0px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border: 6px solid #E1143C; 
    background-color: rgba(228,208,150,1); 
    z-index:1002; 
    overflow: auto; 
} 

及以下的jQuery：

function showForm() { 
    $(".black_overlay").show(200); 
    $(".white_content").show(500); 
} 

Answer 4

肯定。這種效果可以只使用CSS來完成。

如果您有任何ID或類適用於該元素。然後做這個 -

#transparentLayer { 
    opacity:0.5; //for non-IE 
    color:#000; 
    filter: alpha(opacity=50); // for IE 
}