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 
}