正方形の写真の四隅だけを丸くぼかす

正方形でない写真を正方形でトリミング表示し、四隅だけを丸くぼかす。

デモページを表示

CSS

補足

• jQuery で複製された img 要素（写真）を同じ位置に重ねる。背面の写真をぼかし、前面の写真を正円でトリミングする。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• img[data-bg] 要素の親要素に corner-blur クラスがある場合、写真を複製する。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 四隅を丸くぼかす場合は img[data-bg] 要素の 親要素 に corner-blur クラスを付ける。
• spacer-1x1.png は１ピクセル×１ピクセルの透過PNG画像。
• 表示する写真は data-bg 属性で指定する。

関連投稿

• 正方形でない画像を正方形内に表示（レスポンシブ対応）