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

0

ちょっと何言っているか分からないですね。

文字で今回、やりたいことを説明すると難しいです。

やりたいことは、以下のようなことです。

背景画像の上に半透明で半分ずつカラーを設定しています。

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

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

CSSのlinear-gradientで実装する

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

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

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

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

CSSのlinear-gradientの使い方。degの意味や半透明にする方法も紹介

 

さっそくコードを見てみる

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

何も設定しなければ上下に。

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

 

%で色の分かれ目の場所を指定

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

  • deg:角度
  • rgba:色と透過率
  • %:色の開始場所

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

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

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

下記のようになります。

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

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

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









 

About Author

Comments are closed.