Belirli bir div s fotoğraf makinesinin, web sitesinde başka öğelerdeyken, arka planların öğelerin bulanık görüntüleri haline gelmesi için bir bulanıklık filtresi olduğundan emin olmak istiyorum. Stylus'ta tercihen tercih edilir. aşağıda gösterildiği gibiBir div başka bir HTML öğesini yerleştirdiğinde bulanıklık efekti nasıl yapılır?
Elma onların Apple TV website bu kullanır:
sen Son Safari tarayıcısını hedef istiyorum varsayarsak, webkit tanıtıldı backdrop-filter kullanabilirsiniz. Ancak, şu anda yalnızca Safari son sürümlerinde çalıştığını unutmayın. Gördüğünüz gibi here.
Daha fazla bilgi edinmek için bu numaralı adresi ziyaret edin MDN bağlantı.
Güncelleme:
diğer tarayıcılar için efekti oluşturmak için bu şu hile kullanabilirsiniz. Arka plan bulanıklığının sadece bir kısmını yapmak istiyorsanız, çalışmayacağını unutmayın.
.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>Güncelleme 2:
Safari dışındaki tarayıcılarda backdrop-filter etkisi yaratma Kirli ama çalışma yolu. Bu, yalnızca arka planın img olması durumunda çalışacaktır. Hedefe ulaşmak için jQuery kullanmıştım.
$(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>