web-dev-qa-db-ja.com

あなたの注意をバナーに集中させるためにあなたのウェブページを薄暗くする方法？ （あなたのウェブページの薄暗い効果）

この効果が特定のウェブページでどのように作成されるのか疑問に思いました：

Webページを読み込むと、閉じるボタンのあるバナー広告が最上位のレイヤーとして表示され、実際のWebページが下のレイヤーとして表示されます。 Webページが完全に淡色表示されているため、閉じるボタンのあるバナー広告に注意が集中します。広告のこの閉じるボタンをクリックすると、実際のWebページがすぐに表示されますが、元の明るさに戻ります。

まあ、それはほんの一例でした。広告を表示するそのような慣行が厄介であることは知っています。

そして、ここで私の質問は-あなたのウェブページにどのようにしてdim-and-bright効果を得るのですか？

PS：

  1. CSSのZインデックスについて知っているので、調光部分を知る必要があるだけです。
  2. 可能であれば、CSSベースのソリューション（または言い換えると、jsのようなスクリプトを使用しないソリューション）を探しています。

みんなありがとう。

csswebpagefadebanner
25
arun nair

this ？ 非常に最小限のスクリプト。

[〜＃〜] html [〜＃〜]

<div class="overlay"></div>
<div class="overlay-message">
    <p>CLICK TO CLOSE</p>
</div>

jQuery

$(document).ready(function() {
    $(".overlay, .overlay-message").show();

    $(".overlay-message").click(function() {
        $(".overlay, .overlay-message").hide();
    });
});

[〜＃〜] css [〜＃〜]

.overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    opacity:0.8;
    z-index:1001;
}
.overlay-message{
    position: fixed;
    top:30px;
    left:30px;
    width:400px;
    height:250px;
    background-color:#fff;
    opacity:1;
    z-index:1002;
}

.overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    opacity:0.8;
    display:block;
    z-index:1001;
}
.overlay-message{
    position: fixed;
    top:30px;
    left:30px;
    width:400px;
    height:250px;
    background-color:#eee;
    border:1px solid #000;
    opacity:1;
    z-index:1002;
    box-sizing:border-box;
    padding:100px 50px;
}

.overlay-message:hover { 
    cursor:pointer; 
}
<div class="overlay"></div>
<div class="overlay-message">
    <p>CLICK TO CLOSE</p>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $(".overlay, .overlay-message").show();
    
    $(".overlay-message").click(function() {
        $(".overlay, .overlay-message").hide();
    });
});
</script>
28
kei

CSSとopacityで：targetセレクターを使用してこれを行うことができますが、ほとんどのブラウザーではどちらも使用できません。

代わりに、JavaScriptを使用して、淡色表示のボックスを表示する必要があります。

通常は、絶対位置の100％幅と高さのボックスを使用し、背景色はrgbaで、透明なpngフォールバックを使用します。

このようにスタイリングすると機能します。

#dim {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background: url('semitransparent1x1.png');
    background: rgba(0, 0, 0, 0.8);

    z-index:100;
}

次に、いくつかの単純なjQueryを使用して表示し、削除します。

4
Rich Bradshaw