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

推薦する

MySQL 8.0ドライバとAlibaba Druidバージョン間の互換性の問題を解決

この記事では主に、MySQL 8.0 ドライバーと Alibaba Druid バージョン間の互換性...

CentOS SVN サーバーで複数のプロジェクトを管理する方法

一つの要求一般的に、企業には複数のプロジェクトがあります。SVN サーバーを設定した後は、プロジェク...

MySQLで最新のトランザクションIDを照会する方法

前に書いた内容: ビジネス ロジックの判断を行うために、最新のトランザクション ID を表示する必要...

NginxはURLのパスに応じてアップストリームに動的に転送します

Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...

Vue のスロットスコープの詳細な理解（初心者向け）

Baidu には slot-scope に関する記事が既にたくさんありますが、以前よく学習しておら...

JavaScript スクリプトが実行されるタイミングの詳細な説明

JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出され...

docker+jenkins+node.js の自動デプロイメント環境をゼロから構築する方法

このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...

Alibaba Cloud ESC に MYSQL8.0 をインストールするチュートリアル

接続ツールを開きます。私はMobaXterm_Personal_12.1を使用します（公式サイトのダ...

クリックイメージ反転効果を実現するJavaScript

最近、顔コレクションに関するプロジェクトに取り組んでいましたが、フロントエンドモジュールを書いている...

WindowsでcmdからDOSウィンドウに入り、MySQLデータベースにアクセスします。

1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...

ウェブサイトのBGM実装方法

個々のウェブマスターにとって、自分のウェブサイトをいかにユニークで個性あふれるものにするかは、常に絶...

Vue.js フロントエンドフレームワークにおけるイベント処理の概要

1. v-onイベント監視DOM イベントをリッスンするには、v-on ディレクティブを使用します。...

Windows 64 ビット版の MySQL 8.0.15 インストール チュートリアル

まず公式サイトにアクセスしてダウンロードし、MySQLダウンロードをクリックします。 ダウンロードし...

HttpとHttpsの両方をサポートするNginxの詳細な設定

最近の Web サイトでは Https をサポートすることがほぼ標準機能となっており、Nginx は...

Vueのミックスインと継承について詳しく説明します

目次序文ミキシンMixin ノート (重複名)ローカルミックスイングローバル ミックスイン継承するミ...