background-imageを透明にするためのCSS | 素材の壺昔は主にレイアウトを整える役割というイメージが強かったCSSですが、近年はアニメーションさせる事も出来るようになったり、表現の幅が広がってきていますよね。 表現の一つとしてよく使用するのが、透明度を指定する「opacity」がありますが、今回はbackground-imageで指定した背景画像に透明度を指定する方法を書いてみます。 使用するのは「background-image」「background-color」「background-blend-mode」 例えば以下のようなHTMLがあるとします。 これに対して、以下のように背景画像を指定するとします。 .image{ background-image: url("画像パス"); } まずopacityを指定した例を考えてみます。 .image{ background-image: url("画像パス"); opacity: 0.5;
