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％までの背景の色を指定しています。