背景画像の濃さをコントロールする

プリントの背景におく罫線の濃さを調整したい。

色々な濃さの素材を用意するのではなく、一つの(濃い)素材をCSSでコントロールして濃さを調整する

方法

background-imageで背景画像を設定

background-blend-modeをlightenにする

background-colorを#FFF0にすると元の画像の濃さになり、#FFFFにすると元画像は全く見えなず、#FFF8にすると半分の濃さになる。