CSSで背景ぼかしを設定する方法

CSSで背景ぼかしを設定する方法

ページを作成するときに、ページの見栄えを良くするために、背景画像を設定する必要があることがよくあります。ただし、背景画像が派手すぎると、メインコンテンツに影響するため、フィルター属性を使用してぼかし値を設定する必要があります。

HTMLコードは次のとおりです

<!DOCTYPE html>
<html>
<ヘッド>
  <メタ文字セット="utf-8">
  <meta name="ビューポート" content="width=デバイス幅">
  <title>JS ビン</title>
</head>
<本文>
<div class="カバー">
  <h1>私は強調される必要があるコンテンツです</div>
</本文>
</html>

しかし、背景画像に直接使用すると、

。カバー{
    幅:600ピクセル;
    高さ:300px;
    位置:相対;
    テキスト配置:中央;
    行の高さ:300px;
    色：白;
    背景:透明 url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) 中央 中央 繰り返しなし;
    フィルター:ぼかし(5px);
    背景サイズ:カバー;
}

以下のような状況が発生する可能性があります。

背景とメインコンテンツの両方がぼやけていることがわかります。

解決方法: 背景画像に疑似要素を追加し、疑似要素に背景画像とフィルター属性を設定します。具体的なコードは次のとおりです。

。カバー{
    幅:600ピクセル;
    高さ:300px;
    位置:相対;
    テキスト配置:中央;
    行の高さ:300px;
    色：白;
}

.cover::before{    
    コンテンツ：'';
    位置:絶対;
    トップ:0;
    左:0;
    幅:600ピクセル;
    高さ:300px;
    背景:透明 url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) 中央 中央 繰り返しなし;
    フィルター:ぼかし(5px);
    zインデックス:-1;
    背景サイズ:カバー;
}

要約する

以上がエディターが紹介したCSSで背景ぼかしを設定する実装方法です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  格納可能なセカンダリメニューを実装するための JavaScript

>>:  Dockerビルドキットを使用して、Raspberry Piで使用できるDockerイメージを構築します。

推薦する

Linux の Docker コンテナで bash を終了する 2 つの方法

bash を終了する場合は、次の 2 つのオプションがあります。最初のもの: Ctrl + d を押...

Navicat が MySql サーバーにリモート接続できない問題の解決策

Navicat が MySql サーバーにリモート接続できない問題の解決策は、先頭に書かれています:...

MySQL の binlog_format モードと設定の詳細な分析

MySQL レプリケーションには、SQL ステートメント ベースのレプリケーション (SBR)、行ベ...

MySQL InnoDB ストレージエンジンのメモリ管理の詳細な説明

目次ストレージエンジンのメモリ管理データ ページを LRU キューの先頭に置かないのはなぜですか?ダ...

MySQL のデータベース パフォーマンスに影響を与える要因の説明

データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか？」など、...

Docker Swarm クラスタ管理の使用と原理の分析

Swarm クラスター管理導入Docker Swarm は Docker 用のクラスター管理ツールで...

MAC で MySQL の初期パスワードを変更する方法

問題の説明: Macを購入し、初めてMySQLをインストールしました。初期パスワードが分かりません。...

最初のReactページを作成する方法

目次Rractとは何ですか?背景React スキャフォールディングJSXとは何かRractとは何です...

MySQL のデータ統計に関するヒント

よく使用されるデータベースである MySQL では、多くの操作が必要です。デジタル操作には非常に便利...

Ubuntu 20.04でルートアカウントを有効にする方法

Ubuntu 20.04 をインストールした後、デフォルトでは root アカウントのログイン権限が...

MySQL サービスを完全に削除する方法 (レジストリをクリーンアップする)

序文あるプロジェクトの実行可能ファイルをインストールすると、MySQL 自体をインストールできるよう...

負荷分散の基礎知識とnginxを使用した負荷分散の簡単な例

Nginx は、一般的に 7 層の負荷分散に使用できます。この記事では、負荷分散に関する基本的な知識...

CSS で実現される HTML 背景色のグラデーション

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュートリアル

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...

純粋なJSを使用してセカンダリメニュー効果を実現します

この記事の例では、セカンダリメニュー効果を実現するためのJSの具体的なコードを参考までに共有していま...