html - css 背景プロパティ

Question

Facebook の画像をクリックすると、ボックスが表示されますが、残りの背景全体が黒っぽい透明レイヤーで覆われます。それは何の効果ですか？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;
}​

</p>

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 を使用したオーバーレイの不透明度、クロム、サファリなどを使用したオーバーレイの不透明度、フィルターは IE を使用したオーバーレイの不透明度です。

同様の問題を持つプロジェクトを作成しました。最初は非表示だったクラス オーバーレイを含む div を作成し、ボタンをクリックすると可視性が表示に設定されました。divオーバーレイの上にiFrameを配置しました（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
}