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

推薦する

CSS 要素の非表示の原則と display:none および visibility:hidden

1. CSS 要素の非表示<br />CSS では、要素を非表示にする (つまり、画面の...

Vueは動的ルーティングの詳細を実装します

目次1. フロントエンド制御1. router.js ファイル内 (router.js にそれぞれ静...

MySQLは間違ったパスワードを入力する試行回数を制御します

1. 本番環境でMySQLのデッドロックを監視し、デッドロックの可能性を減らす方法まず、デッドロック...

Vue+WebSocket ページでの長時間接続のリアルタイム更新

最近、Vue プロジェクトではデータをリアルタイムで更新する必要があります。折れ線グラフは 1 秒ご...

three.js で 3D ダイナミック テキスト効果を実現する方法

序文みなさんこんにちは。CSS ウィザードの alphardex です。以前、海外のウェブサイトを閲...

DockerにTomcatコンテナを追加したときにホームページにアクセスできない問題の解決方法

質問docker run コマンドを使用して、tomcat コンテナが正常に追加されました。ポートも...

Windows 10 での MySQL 8.0.19 のインストールと設定のチュートリアル

来学期にMySQLを勉強します。事前に自宅で練習していませんでした。インストールに時間がかかるとは思...

Bash で山括弧を使用するその他の方法

序文この記事では、山括弧のその他の用途をさらに詳しく見ていきます。前回の記事では、山括弧 (<...

MySQLでJSONフィールドを操作する方法

MySQL 5.7.8 では json フィールドが導入されました。このタイプのフィールドは使用頻度...

Ubuntu16.04にclionをインストールするプロセス全体と手順の詳細な説明

CLion のプロセス全体を最初から説明します。CLion は、JetBrains がリリースした新...

vue-cropperプラグインは、画像キャプチャとアップロードコンポーネントのカプセル化を実現します。

vue-cropperプラグインをベースにした画像キャプチャとアップロードコンポーネントをカプセル...

MySQL の日付と時刻関数の概要 (MySQL 5.X)

1. MySQLは現在の日付と時刻を取得する関数1.1 現在の日付 + 時刻 (日付 + 時刻) ...

MySQL トリガーの原理と使用例の分析

この記事では、例を使用して、MySQL トリガーの原理と使用方法を説明します。ご参考までに、詳細は以...

使用状況分析を備えたMySQL

持つことの使用法having 句を使用すると、グループ化後にさまざまなデータをフィルター処理できます...

Vue を使用して Web ページのスクリーンショットを撮る方法をご存知ですか?

目次1. html2Canvasをインストールする2. 必要なVueコンポーネントを導入する3. ス...