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 名)

推薦する

Alibaba Cloud ECS クラウド サーバー (Linux システム) は、MySQL をインストールした後にリモートで接続できません (落とし穴)

昨日、1年間使用していた Alibaba Cloud サーバーを購入しました。システムは Linux...

ログインボックスのメールプロンプトを実装するネイティブJS

この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...

CSS3 のエラスティック レイアウトでの em の使用の概要: 1em は何ピクセルですか?

私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...

Vue 天気予報入門

この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...

Web デザインにおける HTML フォーマットと長いファイルに関するヒント

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...

HTMLページの文字セットを指定する2つの方法

1. HTMLページの文字セットを指定する2つの方法方法1: <メタ文字セット="u...

CSS の vertical-align プロパティとベースラインの問題に関する深い理解

vertical-align属性は、主にインライン要素の配置を変更するために使用されます。インライン...

Windows での MySQL 8.0.12 のインストール手順と基本的な使用方法のチュートリアル

この記事では、WindowsでのMySQL 8.0.12のインストール手順と使用方法のチュートリアル...

アイデアコンパイラvueインデントエラー問題シナリオの分析

プロジェクトシナリオ: Vueプロジェクトを実行したらインデントエラーが出ました。ideaコンパイラ...

MySQL 5.7.17 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17 winx64解凍版のインストールと設定方法を紹介します。具体...

Vue で echarts を使用してコンポーネントを視覚化する方法

echarts コンポーネントの公式ウェブサイト アドレス: https://echarts.apa...

Linux ユーザー グループと権限の概要

ユーザーグループLinux では、すべてのユーザーはグループに属する必要があり、Linux には次の...

WebプロジェクトのDockerデプロイメントの実装

前回の記事では、docker サービスをインストールしました。引き続き、Web プロジェクトのデプロ...