webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

background-blend-mode

radial-gradient + background-blend-mode =vignette effect

vignette effect 周辺光量落ちをcssで再現する。 使うのは、radial-gradientとbackground-blend-mode 下の二枚の画像をブレンドする。 楕円形のグラデーションをこんな風に指定すると、、、 #ffffff 0%, #ffffff 50%, #000000 50% マスクになってしまいます。