css filter:blur を使用して画像のぼかし効果を実現します (コード例)

この記事の内容は、CSS フィルターを使用して画像のぼかし効果を実現することについてです。早速、本文を見てみましょう。

最近 CSS の filter:blur の問題に遭遇しました。まず、以下に示すページ上の画像を見てみましょう:

HTML:

<div class="imageContainer">
<img  src="image/1.jpg" alt="css filter:blur を使用して画像のぼかし効果を実現します (コード例)" >
</div>

CSS:

.imageContainer {
    border: solid 5px black;
    width: 1024px;
    height: 768px;
    }

さて、素敵なぼかし効果を適用しましょう:

img {
-webkit-filter: blur(30px);
}

効果は次のとおりです:

画像がコンテナの境界線を越えてぼやけ、ぼやけた画像と黒い境界線の間に「グロー」効果が現れることがわかりました。この問題を修正しましょう。

解決策:

.imageContainer {
overflow: hidden;
}    
img {
+transform:scale(1.1);
}

結果は次のとおりです:

以上がcss filter:blur を使用して画像のぼかし効果を実現します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。