0
我想讓某些div
有模糊濾鏡,因此當它們位於網站上的其他元素上時,它們的背景會變成模糊的元素圖像。如何在div覆蓋另一個HTML元素時產生模糊效果?
優選地在觸筆中。
蘋果使用此對他們Apple TV website,如下圖所示:
我想讓某些div
有模糊濾鏡,因此當它們位於網站上的其他元素上時,它們的背景會變成模糊的元素圖像。如何在div覆蓋另一個HTML元素時產生模糊效果?
優選地在觸筆中。
蘋果使用此對他們Apple TV website,如下圖所示:
假設你要針對最新的Safari瀏覽器,你可以使用介紹webkit
的backdrop-filter
。
backdrop-filter: blur(2px);
但請記住,它目前只適用於Safari最新版本。正如你可以看到here。
要了解更多訪問此MDN鏈接。
更新:
您可以使用此下面的技巧來創建其他瀏覽器的效果。請注意,如果您只想製作背景模糊的一部分,它將不起作用。
.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>
更新2:
創造Safari以外的瀏覽器backdrop-filter
效果的一個骯髒的,但工作方式。 這隻適用於背景爲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>