背景を2色にしたい

yasuko
ステイホーム

backgroundを指定する時に、上側と下側違う色設定したいな~ってことがあります。

背景色を2色設定したい

いろんな方法があると思いますが、

今回はcssだけで2色の指定を。

background:linear-gradient(180deg,gray 0%,gray 50%,yellow 50%,yellow 100%);

これだけ。

(180deg,gray 0%,gray 50%,yellow 50%,yellow 100%);

この部分でいろの変化の向きを指定しています。

0deg (下から上へ)
90deg (左から右へ)
180deg (上から下へ)
270deg (右から左へ)

(180deg,gray 0%,gray 50%,yellow 50%,yellow 100%);

この部分で0%から50%までの背景の色を指定しています。

(180deg,gray 0%,gray 50%,yellow 50%,yellow 100%);

この部分で50%から100%までの背景の色を指定しています。