menu
閉じる
  1. Gutenberg ブロックエディタに設定した内容をカスタムフィールド…
  2. Advanced Custom Fields : Repeater F…
  3. カテゴリをチェックした時に、並び順が変更にならないようにする
  4. カスタム投稿タイプとタクソノミー、ターム追加スニペット
  5. Welcartの商品一覧でSKUごとの価格を表示する
  6. CSSでグラデーションテキスト
  7. ログイン画面をカスタマイズ
  8. WordPressのテキストエディタから不要なボタンを削除
  9. メニューのリンクが空の場合はa要素を出力しない
  10. WordPressで複数の条件を組み合わせた検索フォーム
閉じる
閉じる
  1. Gutenberg ブロックエディタに設定した内容をカスタムフィールド…
  2. 投稿ページが複数カテゴリに紐づく場合のパンくずリスト
  3. MW WP Formのフォームに投稿やカスタム投稿、タクソノミーを選択…
  4. jQueryプラグイン「VEGAS」にテキストを追加して背景の切り替え…
  5. 親ターム子ターム毎にまとめて記事一覧を表示する
  6. ビジュアルエディタにTinyMCEの機能を追加する覚書(プラグインなし…
  7. Really Simple CSV Importerプラグインでパーマ…
  8. Advanced Custom Fields PROの「オプションペー…
  9. 管理画面のカスタム投稿記事一覧ページでカスタムタクソノミーで絞り込み
  10. 【令和追加】date()関数を日本の元号に対応させる
閉じる

Mana Design Lab.

CSSで背景要素だけにブラーエフェクトを加える

背景画像だけにブラーを適用させ、中の要素には影響しないCSS

ページコンテンツ

CSSで背景要素だけにブラーエフェクトを加える方法

/*背景画像の設定をする*/
.bgImage{
	background: url(../images/hogehoge.png) no-repeat center;
	background-size: cover;
	position: relative;
	z-index: 0;
	overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
}
/*:beforeにぼかし効果を設定する*/
.bgImage::before{
	content: '';
	background: inherit;/*.bgImageで設定した背景画像を継承する*/
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	position: absolute;
	/*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	z-index: -1;/*重なり順序を一番下にしておく*/
}

ブラーエフェクトは擬似要素に設定する

ブラーエフェクトは「::before擬似要素」に設定して中の要素にまでブラーエフェクトが効いてしまうのを回避する

画像を大きめに引き伸ばし、端のぼやけた部分をカット

ぼかしをかけた分だけ、画像の端までボヤけてしまうので、ぼかす分だけ大きいサイズの画像を用意し、その上で端を切り落とす。
最後にはみ出した部分はoverflow: hidden;で非表示にする。

ブラーエフェクトがかかった擬似要素は一番下にする

ブラーエフェクトがかかった擬似要素にはposition: absolute;を設定しているため、z-indexで一番下する。

関連記事

  1. 便利でよく使うCSS関数

  2. CSSでグラデーションテキスト

おすすめ記事

  1. Gutenberg ブロックエディタに設定した内容をカスタムフィールドを含め他のページで表示する
  2. Really Simple CSV Importerプラグインでパーマリンクの末尾に付く「-2」をSQLで一括削除
  3. 【令和追加】date()関数を日本の元号に対応させる
  4. WordPressで複数の条件を組み合わせた検索フォーム
  5. ログイン画面をカスタマイズ

ピックアップ記事

  1. 他のページで設定したブロックの内容を表示したかった時の覚書。汎用性からショートコードにまとめ…
  2. 大量の記事をCSVで一気に流し込めるプラグイン「Really Simple CSV Importer…
  3. 未だに明治やら大正やら昭和やら平成やら日本の元号がちょくちょく利用されますが、素晴らしいdate()…

最新記事

  1. Gutenberg ブロックエディタに設定した内容をカスタムフィールドを含め他のページで表示する
  2. 投稿ページが複数カテゴリに紐づく場合のパンくずリスト
  3. MW WP Formのフォームに投稿やカスタム投稿、タクソノミーを選択項目として表示
ページ上部へ戻る