画像を破壊せずにハイライトを入れる
もう少し改良が必要そうだが、忘れないように記事にしておく
図1:
ハイライト
構成
ボックスの中にインボックスを入れて画像を配置。キャプションはインボックスの兄弟要素
図1:
ハイライト
画像の兄要素として幅高さ100％背景#0008のdivを配置して、mix-blend-mode:multiply;(乗算)にする
図1:
ハイライト
そのdivの中に、さらに背景白のdivを配置すると、そこが白く抜ける
図1:
ハイライト
mix-blend-modeを未設定にすると、最後に追加したdivが塗りつぶしで表示される
図1:
ハイライト
後からハイライトの大きさや位置・個数などを自由に変えられるのがメリットだが、ポインタが効かなくなるので拡大などができない
図1:
テキトーに増やしてみる
引用画像がスクショの場合の問題として、等倍で表示しないと字が読めないので、スクショする時に画面の倍率を下げないといけない