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イメージを構築します。

推薦する

Docker を使用して Jenkins をインストールするためのサンプル コード

Dockerコンテナのインストール時に遭遇しやすい2つの問題1.ポートはすでに割り当てられています（...

Ubuntu mysqlログイン名とパスワードを表示および変更し、phpmyadminをインストールする

MySQLをインストールした後、ターミナルでmysql -u root -pと入力してEnterを押...

Vue ページ印刷で自動ページングを実装する 2 つの方法

この記事では、ページ印刷の自動ページングを実現するためのVueの具体的なコードを例として紹介します。...

jQuery は拡張アニメーションによるナビゲーション バー効果を実装します

展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...

ストリーマーボタンの効果を実現するCSS3アニメーション

CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分か...

MySQL 完全折りたたみクエリ正規マッチングの詳細な説明

概要前の章では、クエリのフィルター条件について学習しました。MySQL では、like % ワイルド...

React で複数の setStates が何回呼び出されるのでしょうか?

目次1. 2 つの setState を何回呼び出すのですか? 2. 2 つの setState の...

redhat7 に yum 経由で mysql5.7.17 をインストールするチュートリアル

RHEL/CentOS シリーズの Linux オペレーティング システムには MySQL ソース自...

Centos 7.4 でリモート アクセス制御を実装する方法

1. SSHリモート管理SSH はセキュア チャネル プロトコルであり、主にリモート ログイン、リモ...

NODE.JS を使用して WEBSERVER を作成する手順

目次Node.jsとはNodeJSをインストールするNode を使用して Hello World を...

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...

mysql サブクエリと結合テーブルの詳細

目次1. サブクエリとは何ですか? 2. 自己結合3. 自然な結合4. 外部接続1. サブクエリとは...

JavaScriptで配列を作成する方法の詳細な説明

目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...

幅と高さが可変の要素を中央に配置するための CSS ソリューション

1. 水平中央公開コード: html: <div class="parent&quo...