こんにちは。sagayuriです。
先日コーディングしていて少しハマったことについて。今まで気がつかなかったので備忘録として残しておこうと思います。
背景色をグラデーションにしたい。
背景色を変更するプロパティといえば、background-colorですね。
例えばこんな感じのものを作りたい時、
コーディングはこんな感じになります。
See the Pen
bg_pink by Yuri Sagano (@Yuri_0405)
on CodePen.
背景をグラデーションにしてみる
グラデーションといえば、linear-gradientを使うと思います。
先ほどの記述のpinkの部分をグラデーションに変えてみましょう。
See the Pen
bg_gradient_02 by Yuri Sagano (@Yuri_0405)
on CodePen.
不思議なことに、background-colorにグラデーションの記述をしても、反映されません…
背景色をグラデーションにするにはbackground-imageを使う
結論を書いてしましましたが、背景色をグラデーションにしたい場合は、background-colorではなく、background-imageを使います！
See the Pen
bg_gradient_02 by Yuri Sagano (@Yuri_0405)
on CodePen.
なぜ今までこの問題に直面しなかったのか、それは今までbackgroundと後ろを省略していて気がつかなかったのでした…
