css背景属性

Question

当你在脸书中点击图片时，一个盒子正面，但其余整个背景被黑色透明层覆盖。那是什么影响？它可以用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-index表示叠加层位于所有其他元素之上，应该位于叠加层顶部的元素（Facebook上的图像帧）必须具有值为1002或更高的z-index。

-moz-opacity是使用firefox覆盖的不透明度，带有chrome，safari的覆盖的不透明度......以及过滤器用于与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
}