Как сделать эффект размытия, когда div накладывает другой элемент HTML?

Question

Я хочу, чтобы некоторые div имели фильтр размытия, поэтому, когда они находятся на других элементах веб-сайта, их фон становится размытым изображением элементов.

Желательно в стилусе.

Apple, использует это на их Apple TV website, как показано ниже:

Answer 1

Предполагая, что вы хотите предназначаться последней версии браузера Safari, вы можете использовать backdrop-filter введенный в webkit.

backdrop-filter: blur(2px); 

Но помните, что в настоящее время он работает только в последних версиях Safari. Как видите, here.

Чтобы узнать больше, посетите MDN ссылка.

Update:

Вы можете использовать следующий трюк, чтобы создать эффект для других браузеров. Обратите внимание, что это не сработает, если вы хотите сделать только часть размытия.

.container { 
 
    width: 70%; 
 
    height: auto; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.backdrop { 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    filter: blur(5px); 
 
} 
 
.backdrop img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
} 
 
.overlay { 
 
    opacity: 0.6; 
 
    background: #f2f2f2; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    font-size:20px; 
 
    font-weight:bold; 
 
    text-align:center; 
 
    padding-top:100px; 
 
    box-sizing:border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="backdrop"> 
 
    <img src="http://lorempixel.com/400/200/"> 
 
    </div> 
 
    <div class="overlay">This is just an overlay</div> 
 
</div>

Update 2:

Грязный, но рабочий способ создания backdrop-filter эффекта в других, чем Safari браузеры. Это будет работать только в том случае, если фон является img. Я использовал jQuery, чтобы достичь цели.

$(window).load(function() { 
 
    bgWidth = $('.backdrop img').outerWidth(); 
 
    bgLeft = $('.backdrop img').offset().left - $('.overlay').offset().left; 
 
    bgTop = $('.backdrop img').offset().top - $('.overlay').offset().top; 
 
    bg = $('.backdrop img').prop('src'); 
 

 
    //console.log($('.backdrop img').offset().top, $('.overlay').offset().top) 
 

 
    $('.overlay .blury').css({ 
 
    'background-image': 'url(' + bg + ')', 
 
    'background-size': bgWidth + 'px auto', 
 
    'background-position': (bgLeft) + 'px ' + (bgTop) + 'px' 
 
    }) 
 
})

.container { 
 
    width: 70%; 
 
    height: auto; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.backdrop img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
} 
 
.overlay { 
 
    background: #f2f2f2; 
 
    width: 50%; 
 
    height: 50%; 
 
    left: 25%; 
 
    top: 25%; 
 
    position: absolute; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    padding-top: 40px; 
 
    box-sizing: border-box; 
 
} 
 
.overlayText, .overlay .blury { 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    position: absolute; 
 
} 
 
.overlayText{ 
 
    z-index:2; 
 
    background:rgba(255, 255, 255, 0.3); 
 
} 
 
.overlay .blury { 
 
    -webkit-filter: blur(15px); 
 
    -moz-filter: blur(15px); 
 
    -ms-filter: blur(15px); 
 
    -o-filter: blur(15px); 
 
    filter: blur(15px); 
 
    z-index:1; 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="backdrop"> 
 
    <img src="http://lorempixel.com/400/200/"> 
 
    </div> 
 
    <div class="overlay"> 
 
    <div class="overlayText">This is just an overlay</div> 
 
    <div style="" class="blury"></div> 
 
    </div> 
 
</div>