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

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