518 回閲覧されました

みなさんこんにちは、jonioです。

CSSにbackground-imageがありますが背景画像を薄くしようとしてopacityを設定しても全てが薄くなって上手くいきません。

簡単にできるのですがやり方のメモとしてこの記事を残します。

css

CSSを何も使ってない状態が下記になります。

よく分かってないのですが下記のCSSで背景画像を薄くできます。

background-image:url("画像のパス");
background-color:rgba(255,255,255,0.7);
background-blend-mode:lighten;

背景画像を薄くした状態が下記になります。