ホームページ > 記事 > ウェブフロントエンド > CSSを使用して簡単な背景ぼかしを実装する方法(コード例)
この記事の内容は、CSSを使って簡単な背景ぼかしを実現する方法(コード例)を紹介するというものです。困っている友人は参考にしていただければ幸いです。
フィルター属性を使用してぼかし値を設定します
効果:
css スタイル:
<style type="text/css"> .cover { width: 600px; height: 300px; position: relative; text-align: center; line-height: 300px; color: #fff; margin: 20px auto; } .cover::before { content: ""; position: absolute; top: 0; left: 0; width: 600px; height: 300px; background: transparent url(Images/picture/5.jpg) center center no-repeat; filter: blur(8px); z-index: -1; background-size: cover; } </style>
HTML 構造:
うわー以上がCSSを使用して簡単な背景ぼかしを実装する方法(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。