CSS
CSS3

background-colorとlinear-gradientはどう違うのか

More than 1 year has passed since last update.

途中まで背景を塗りたい

背景の色を決める時にはbackground-colorを使うことが多いですが、要素の一部分のみに色を塗りたい時はありませんか?
まあbox-shadowを使えば全て解決なんですが、別の解決方法を考えました。

background-imagelinear-gradientを使う

という解決方法です。ちなみにTwitterの投票の棒グラフでは2つの要素を重ねあわせて無理やり実現しています。
PureCSSで解決できないなんてCSS使いの風上にもおけない。
linear-gradientは複数の色を合わせてグラデーションを作り出す要素ですが、画像扱いなのでbackground-colorではなく、background-imageに指定します。background-imageは縦横のサイズが決まっています。そのため、background-positionを使えば部分的に色を塗ることができます。
background要素は複数の背景を設定できるので、これを使えば理論上ドット絵を描くことも可能なはずです。

例: 幅500pxの要素に対して2:3に塗り分ける方法。

background: linear-gradient(#1f2,#1f2) -300px center no-repeat,
            linear-gradient(#ada,#ada) right center no-repeat;

jsfiddleにサンプルを置いています。
https://jsfiddle.net/matyapiro31/ts53cfcq/4/