CSS3 ヒント 36: 背景フィルター背景フィルター

CSS3 には filter 属性があり、コンテンツ、特に画像にさまざまなフィルター効果を追加できます。

フィルターの詳細については、ブログ投稿「CSS3_css3 filter_stones4zd のブログの強力なフィルター属性 - CSDN ブログ」を参照してください。

その後、CSS3 では、background-filter背景フィルターが追加されました。

backdrop-filter の属性値は、効果を適用するためのラベルが異なることを除いて、filter の属性値とまったく同じです。

• filter: ラベル自体に作用します。
• backdrop-filter: ラベルでカバーされるコンテンツに作用します。カバー効果を実現するには、位置属性を組み合わせることが必要になることがよくあります。

例としてぼかし効果を取り上げます。

次のような HTML の分解があります。

<div class="box">
        <div class="small  bf1">
            模糊
        </div>
        <img src="images/myimg.jpg" alt="">
</div>

CSS: 絶対位置に小さくして画像を覆います。

 .box{
            width: 600px;
            height: 399px;
            overflow: hidden;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            position: relative;
}
.small{
            position: absolute;
            width: 300px;
            height: 200px;
            left:50%;
            top:50%;
            margin-left: -155px;
            margin-top: -105px;
            border:5px #fff solid;
}

背景フィルター のぼかしフィルターを追加します。

.bf1{
    backdrop-filter: blur(10px);
}

効果は以下の通りです。div.small で覆われた画像の部分がぼやけます。 

div.small でカバーされるコンテンツにフィルターが適用される限り、カバーされるコンテンツの量は問題ではないことに注意してください。たとえば、2 枚の写真を覆う効果です。