【CSS】背景画像に半分ずつの半透明の色を載せる方法

2021-02-18

背景画像の上に半透明で半分ずつカラーを設定する方法を紹介。

ちょうど真ん中の部分ではっきり色が変わり、傾斜もつけています。

さっそく、このデザインを実装するやり方を見ていきましょう。

CSSのlinear-gradientで実装する

こういったデザインを実装するために使うのがCSSのlinear-gradientという機能です。

よく背景画像に2色以上の半透明の色がグラデーションになったトップページデザインを見ますよね。

これと全く同じ機能で半分ずつくっきり色分けされたデザインを実装することができます。

上記の段々とグラデーションで色が変わっていく方法はこちらの記事で紹介しています。

background-image:
    linear-gradient(110deg, rgba(12,172,178,0.4) 50%,
    rgba(146,22,114,0.4) 50%), url(img/xxx.jpg);

上記のコードで実装できます。110degとういのは角度のことになります。反時計回りに110度の傾斜をつけています。(ちょうど色が別れる境界線です)

90degに設定すれば真ん中で半分ずつに綺麗に分かれます。

linear-gradientの値では主に以下の値を設定します。

上記デザインの場合、色の開始場所をそれぞれ50%で指定しています。

この、それぞれの値を20%,80%のように指定するとクッキリと分かれた色ではなくグラデーションになります。

ちょうど真ん中で色を分けるのではなく、左寄りの場合は双方30%で指定してみてください。

逆に右側に寄せたい場合は70% 70%での指定になります。

ただし、これは110degを基準に考えているので、角度が変わればまた変わってきます。

実際には値を変えながらブラウザで確認していくと良いでしょう。