次世代Webスタイリングを追う ーbackdrop-filter - Qiita

またMDNの説明によると、 filter は、背景にもグラフィック効果を適用することができるようなので試してみました。 画像ではなく、キャプション要素に filter のぼかし効果を適用しています。 <style> figure { position: relative; background-color: yellowgreen; } figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 8px 16px; color: #fff; background-color: rgba(0, 0, 0, 0.4); filter: blur(7px); } </style> <figure> <img src="hoge.png" alt="" /> <figcaption>これはキャプションです。</fi