html - CSS背景属性

Question

当您在 facebook 中单击图像时，会弹出一个框，但其余的整个背景都会被黑色透明层覆盖。那是什么效果？可以使用 css 应用吗？

Answer 1

你可以使用这个插件：

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

Answer 2

它当然可以使用 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，当单击按钮时，可见性设置为可见。我在 div 叠加层（z-index 1002）上放置了一个 iFrame。

这是我的叠加层的 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 3

是的。这种效果只能使用 css 来完成。

如果您有任何id或class应用于该元素。然后这样做 -

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

Answer 4

<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;
}​

​</p>

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