CSS で背景ぼかし効果を実装するサンプルコード

CSS で背景ぼかし効果を実装するサンプルコード

以下のような効果でしょうか?もしそうなら、ぜひ読み進めてください!

ここに画像の説明を挿入

コードデモンストレーション(上の画像を例に挙げます)

メインモジュールを書き出し、その他の詳細についてはコードを省略します。

HTMLコード:

 <div class="ログインコンテナ">
     //このdivは背景画像です <div class="beijing"></div>
     //この div は表示されるコンテンツ ブロックで、ロゴとログイン ボックスです <div class="content"></div>
  </div>

CSSコード:

 .ログインコンテナ{
    位置: 相対的;
    幅: 100%;
    高さ:100%;
    位置: 相対的;
    //フレックスレイアウトを使用してコンテンツを垂直方向に中央揃えします。モジュール表示: flex;
    flex-direction: 列;
    位置: 相対的; 
  }
 .beijing{ //背景画像スタイル width: 100%;
    高さ: 100%;
    位置: 絶対;
    左: 0px;
    上:0px;
    背景: url('../../../static/img/timg (1).jpg');
    背景繰り返し: 繰り返しなし;
    背景サイズ: カバー;
    -webkit-filter: ぼかし(10px);
    -moz-filter:ぼかし(10px);
    -o-フィルター: ぼかし(10px);
    -ms-filter:ぼかし(10px);
    フィルター: ぼかし(10px);
  }
.content{ //コンテンツ画像スタイルの幅: 80%;
	高さ: 70%;
	位置: 絶対;
	zインデックス: 5;
}

上記の HTML と CSS に従うことで、希望する背景ぼかし効果を実現できます。

要約する

これで、CSS で背景ぼかし効果を実装するサンプル コードに関するこの記事は終了です。CSS 背景ぼかしコンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  VMware WorkStation を Docker for Windows で使用するための詳細なチュートリアル

>>:  SQL 実装 LeetCode (185. 部門内で最も給与の高い上位 3 名)

推薦する

このような大画面のデジタルスクロール効果が必要になる場合があります

大画面のデジタル スクロール効果は、最近の作業における大画面 UI ダイアグラムから生まれました。U...

シングルサインオン制御を実装するためのVueの完全なコード

参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いで...

マークアップ言語 - CSS レイアウト

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

JavaScript における型の必須および暗黙的な変換の詳細な説明

目次1. 暗黙的な変換二重等号での変換ブール型変換「+」と「-」 2. 強制型変換' ...

DockerのIDEA構成プロセス

IDEA は Java で最も一般的に使用されている開発ツールであり、Docker は最も人気のある...

HTML インライン要素と HTML ブロックレベル要素の概要と違い

ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい...

MySQL 8.0.12 のインストールと設定方法のグラフィック チュートリアル (Windows10)

この記事は、参考のためにMySQL 8.0.12のインストールグラフィックチュートリアルを記録してい...

MySQL データベースでよく使用される SQL ステートメントの詳細と概要

この記事では、MySQL データベースでよく使用される SQL ステートメントを例を使用して説明しま...

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...

SecureCRT に基づくリモート Linux ホストへのファイルのアップロードとダウンロードのグラフィカルな手順

wget や curl ツールを使用して、Linux サーバーで大規模なネットワーク ファイルを直接...

JSはjQueryのappend関数を実装します

目次コードを見せてください効果をテストする効果追伸別のアプローチコードを見せてください HTMLEl...

集める価値のある 15 個の JavaScript 関数

目次1. 数字を逆にする2. 配列内の最大のn個の数値を取得する3. 階乗を計算する4. 現在の動作...

MySQL データベース アーキテクチャの詳細

目次1. MySQL アーキテクチャ2. ネットワーク接続層3. データベースサービス層4. 接続プ...

Linux での Tomcat8 のインストールとアンインストールに関する詳細なグラフィック チュートリアル

[ Tomcat8 の Linux インストール ] Tomcat をアンインストールする - まず...

Webデザイナーの成長体験

<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...