0
div
にはぼかしフィルタがあるようにしたいので、ウェブサイト上の他の要素にあるときにその背景が要素のぼやけた画像になります。divが別のHTML要素をオーバーレイするときにぼかし効果をかける方法は?
好ましくはスタイラスで。以下に示すように
AppleはそのApple TV websiteでこれを使用しています。
div
にはぼかしフィルタがあるようにしたいので、ウェブサイト上の他の要素にあるときにその背景が要素のぼやけた画像になります。divが別のHTML要素をオーバーレイするときにぼかし効果をかける方法は?
好ましくはスタイラスで。以下に示すように
Appleはその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>