Как уменьшить яркость веб-страницы, чтобы сосредоточить внимание на баннере?(тусклые яркие эффекты на вашей веб-странице) - PullRequest
Новая
       6

Как уменьшить яркость веб-страницы, чтобы сосредоточить внимание на баннере?(тусклые яркие эффекты на вашей веб-странице)

25 голосов
/ 13 мая 2011

Мне было интересно, как этот эффект создается на определенных веб-страницах:

При загрузке веб-страницы баннерная реклама с кнопкой закрытия отображается как самый верхний слой, а фактическая веб-страница отображается как нижнийслой;веб-страница полностью затемнена, так что центр внимания, естественно, падает на рекламный баннер с кнопкой закрытия.И после нажатия этой кнопки закрытия в объявлении фактическая веб-страница отображается немедленно, но теперь она возвращается к своей первоначальной яркости.

Что ж, это всего лишь пример, я знаю, что такая практика показа рекламы утомительна.

И мой вопрос здесь - Как вы получаете этот тусклый и яркий эффект на вашей веб-странице?

PS:

  1. Я знаю о z-index в css, так что мне просто нужно знать часть затемнения.
  2. Я ищу cssна основе решения (или перефразируя его, решение без использования каких-либо сценариев, таких как js), если это возможно.

Спасибо, ребята.

Ответы [ 2 ]

28 голосов
/ 13 мая 2011

Что-то вроде это ? Очень минимальный сценарий .

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>
4 голосов
/ 13 мая 2011

Вы можете сделать это, используя селектор: target в CSS и прозрачность, но оба они недоступны в большинстве браузеров.

Вместо этого вам придется использовать 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, чтобы показать и удалить его.

...