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-compsoe を使用してフロントエンドとバックエンドを分離したプロジェクトをデプロイする方法
事前に言っておくDocker を使用すると非常にシンプルなデプロイメント環境を実現できることは誰もが...
ウェブサイトにダークモード切り替え機能を持たせるための純粋なCSSフリー実装コード
序文ダーク モードの概念は、 MacOS系統のMojaveに由来し、ユーザーが選択できる 2 つのス...
MySQLは、where in()順序ソートを実装するためにfind_in_set()関数を使用します。
この記事では、MySQL で find_in_set() 関数を使用して where in() の順...
Tomcat イメージをインストールして Docker に Web プロジェクトをデプロイする方法を簡単に説明します。
1. Tomcatをインストールする1. Docker HubでTomcatイメージを見つける d...
Nginx 運用保守ドメイン名検証方法例
インターフェイス ドメイン名を構成する際、各パブリック プラットフォームはドメイン名に対する開発者の...
Jira リバース プロキシを実装するための nginx について
概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...
MySQL データベースのバックアップとリカバリの実装コード
データベースのバックアップ ＃文法： # mysqldump -h server-u usernam...
MySQL 5.6 ルートパスワード変更チュートリアル
1. MySQL 5.6をインストールした後、正常に有効化できないMySQL の圧縮バージョンは、解...
MySql 組み込み関数の自習知識ポイントまとめ
文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...
MySQLインデックスが失敗するいくつかの状況の分析
1. 最左プレフィックス原則 - 複数の列にインデックスが付けられている場合は、最左プレフィックス原...
Tcl言語に基づくシンプルなネットワーク環境を構成するプロセスの分析
1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...
React tsx はランダムな検証コードを生成します
React tsxは参照用にランダムな検証コードを生成します。具体的な内容は次のとおりです。最近、t...
Vueを使い始める際に習得する必要がある知識について簡単に説明します
最も人気のあるフロントエンド フレームワークの 1 つとして、Vue は多くのフロントエンド開発エン...
Web フォームの入力要素の高度な使用例 11 選
1. ボタンが押されたときに点線のボックスをキャンセルする<br />入力に属性値hid...
Linux で PHP curl 拡張機能をインストールする方法の詳細な説明
この記事では、Linux で PHP curl 拡張機能をインストールする方法について説明します。ご...