また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

次世代Webスタイリングを追う ーScroll Snap, :focus-within, @media (prefers-*), :is() CSSフロントエンド こちらは「DeNA Advent Calendar 2019」 の16日目です。 今年は「20新卒のAdvent Calendar」もありますので、よかったら合わせてご覧ください。 概要 Chrome Dev Summit 2019 にて、「 Next-generation web styling 」というセッションがありました。このセッションでは、CSSのセレクタやプロパティをはじめとするWebスタイリングにまつわる多くの新しいTipsが紹介されています。 セッション内の全てのTipsを手を動かしながら確認したかったんですが、色々と間に合いませんでした。なので、現時点で僕が理解できた（であろう）内容を記載したいと思います。 本