このページは背景を単調な１色塗り以外にする方法を説明します。
英雄クロニクルゲーム内も各国街並みっぽい画像が背景になっていますよね？
残念ながら、自由記入欄では画像を背景にすることはできません。 単色以外の背景にすることはできます。
背景を虹色にする方法は、「虹の背景」で説明しています。
色の指定方法によっては、色の透明度を指定することができます。
次のように入力してください。
<div style="width: 300px; height: 200px; background-color: yellow;">
<div style="width: 200px; background-color: rgba(255,0,0,1);">透明度のない赤</div>
<div style="width: 200px; background-color: rgba(255,0,0,0.75);">少し透明な赤</div>
<div style="width: 200px; background-color: rgba(255,0,0,0.5);">半分透明な赤</div>
<div style="width: 200px; background-color: rgba(255,0,0,0.25);">かなり透明な赤</div>
<div style="width: 200px; background-color: rgba(255,0,0,0);">透明な赤</div>
</div>
rgba()は色を表す方法の１つで、RGBAカラーモデルで色を指定します。 RGBAカラーモデルは、ほとんどのイラストソフトで色指定の方法として使われるので、たぶんご存知の方が多いと思いますが、分からない場合は検索してください。
ともかくrgba()で、透明度のある色を指定することができ、それを背景にすることができます。
（透明度を指定する方法は、他にもあります。#FF000080や、#0008のような指定もできますが、透明率（透過率）が少しわかりにくいです。rgbaは0.5などの、0～1の間の小数で指定することができます。）
透明色を指定できるのは、背景だけに限らりません。色指定できるもの（文字、枠など）でも指定できます。
単色で透明色を使う意味はあまりありません。（上の例なら、黄色と半透明な赤の混ざった色を最初から指定すればよいため。）しかしこの後で説明するグラデーションと一緒に使うと、面白い効果がでることがあります。
単色ではなくグラデーションを背景にすることができます。
次のように入力してください。
<div style="width: 300px; height: 300px; background: linear-gradient(green,yellow);">緑→黄</div>
"background: linear-gradient(green,yellow);"で、背景が緑から黄色に変化するグラデーションになります。
background-colorではなくbackgroundになっている点に注意してください。
linear-gradient()は、グラデーションの色を作る設定です。（）の中に記載するパラメーターに応じて、様々なグラデーションを作ることができます。
この例は２色のグラデーションですが、途中に色を挟めば沢山の色のグラデーションを作ることができます。
また、この例では上→下ですが、方向も変えることができます。
<div style="background: linear-gradient(90deg,red,yellow,green,blue,purple);">虹色に変化する感じの背景</div>
この例では５色のグラデーションを作っています。方向は90deg指定により左→右になっています。（0degを指定すると方向は下→上になります。方向指定なしは180degと同じです。）
グラデーションの中間点を変えることもできます。 言葉だけでは説明が難しいでの次の例を見てください。
<div style="background: linear-gradient(90deg,green,20%,yellow);">２０％</div>
<div style="background: linear-gradient(90deg,green,yellow);">指定なし</div>
<div style="background: linear-gradient(90deg,green,80%,yellow);">８０％</div>
20%や80%を途中に指定すると、指定なしと色の変化スピードというか、中間色になる位置が変わります。
20%のときは中間色の地点が緑側に近づき、80%のときは黄色側に近づき。
グラデーションがかかり始めるタイミングを指定することができます。
<div style="background: linear-gradient(90deg,green 50%,yellow 50%);">中央ではっきり変わる（グラデーションなし）</div>
<div style="background: linear-gradient(90deg,green 25%,yellow 75%);">２５％まで緑、７５％から黄色、２５～７５％がグラデーション</div>
<div style="background: linear-gradient(90deg,green 25%,40%,yellow 75%);">２５％まで緑、７５％から黄色、中間点が４０％</div>
<div style="background: linear-gradient(90deg,green,yellow);">指定なし</div>
入力例と順番が前後しますが２つ目について説明します。
２つ目は「２５％地点が緑、７５％が黄色で、その間が緑→黄色のグラデーション」という設定です。
この場合０～２５％と、７５％～１００％のところは設定が無いので、２５％の緑と７５％の黄色が延長している状態になります。結果として、「０～２５％が緑、７５～１００％が黄色、その間がグラデーション」になります。
３つ目は、２つ目の設定に加えて、４０％のところが中間色になっています。
１つ目は、０～５０％が緑、５０％～１００％が黄色になってしまうので、真ん中できれいにわかれてしまいます。
下の例では、１５～８５が白く、それより外側に向かって白から青にグラデーションしています。
<div style="background: linear-gradient(navy,white 15%,white 85%,navy); padding: .5em; color: navy; font-size: 150%; text-align: center;">グラデーションな見出し</div>
中間点を指定する方法と、変化タイミングを指定する方法がまぎらわしいですが、習うより慣れろというか、トライエラーでがんばってください。
ある点を中心に放射状に広がるタイプのグラデーションを作ることもできます。 これを放射状グラデーションと呼びます。
１つ前までのグラデーションは線形グラデーションと呼びます。
<div style="width: 200px; height: 200px; background: radial-gradient(green,yellow);">緑→黄</div>
<div style="width: 200px; height: 200px; background: radial-gradient(green,30%,yellow);">中間点指定</div>
<div style="width: 200px; height: 200px; background: radial-gradient(purple 30%, blue, green,yellow, red 70%);">タイミング指定＆複数</div>
指定のしかたは線形グラデーションとほとんど同じなので説明は省略します。
放射状の中心点を変更することもできます。
<div style="width: 200px; height: 200px; background: radial-gradient(at 50% 100%,green,yellow);">下</div>
<div style="width: 200px; height: 200px; background: radial-gradient(at 10% 10%,yellow 5%,6%,#003);">左上</div>
at 50% 100%で、左から５０％、上から１００％の位置（ブロックの下辺の中点）を中心にします。
２つ目は、月夜っぽい背景として使えるかもしれません。（これと公式ギャリーを組み合せれば…）
ただし、上のようにきれいな円になっているのは、ブロックの高さと横幅が同じだからです。縦横のサイズが変わってしまうと潰れた円になってしまいます。
<div style="background: radial-gradient(white 40%,navy 60%); padding: .5em; color: navy; font-size: 150%; text-align: center;">つぶれた円状になる</div>
これはこれで、味があるかも知れません。
他にも扇状グラデーションというものがあります。ただ、私は使う機会がほとんどないので詳しいことは知りません。 検索して調べて下さい。
<div style="width: 200px; height: 200px; background: conic-gradient(red,yellow,green,blue,purple,red);">扇状</div>
グラデ―ションは重複できます。
とても、わかりやすい例を示します。
<div style="width: 200px; height: 200px; background: conic-gradient(red,yellow,green,blue,purple,red);">扇状</div>
<div style="width: 200px; height: 200px; background: radial-gradient(rgba(255,255,255,0.1) 30%,rgba(0,0,0,1),orange 70%);">放射状</div>
<div style="width: 200px; height: 200px; background: radial-gradient(rgba(255,255,255,0.1) 30%,rgba(0,0,0,1),orange 70%),conic-gradient(red,yellow,green,blue,purple,red);">合体</div>
３つ目がグラデーションの重複です。１つ目のグラデーションの上に２つ目のグラデーションが重複しています。 ペイントソフトでレイヤーを重ねている感じです。
放射状で中心点の色がrgba(255,255,255,0.1)になっているのがポイントです。
このため放射状のグラデーションの中心は透明に近い白になっていて、扇状グラデーションが見えています。
背景を単色？の虹色にすることができますが、同じテクニックをつかうことで、グラデーションの一部を虹色にすることができます。
<div style="width: 200px; height: 200px; animation: 10s infinite rainbow; background: linear-gradient(0deg,currentColor,#000);">下が虹色に変化→上は黒のグラデーション。（文字も虹色）</div>
虹色に設定する部分の説明は、「虹の背景」を見て下さい。
グラデーションの変化形で、反復グラデーションというものを使う事ができます。 グラデーションが何度も繰り返します。 これもやはり実際の例を見ていただいた方が分かりやすいと思います。
<div style="width: 200px; height: 200px; background: linear-gradient(90deg, green,yellow 35%);">通常の線形グラデーション</div>
<div style="width: 200px; height: 200px; background: repeating-linear-gradient(90deg, green,yellow 35%);">反復線形グラデーション</div>
通常のグラデーション指定に、"repeating-"をつけると、反復グラデーションになります。放射状も扇状も反復グラデーションがあります。
上の例の場合、通常の線形グラデーションでは、0%で緑→35%で黄色のグラデーションとなり、35%以降は黄色のままです。
反復の場合、35%で黄色になった後、そこからまた緑に戻って繰り返します。 35%緑→70%黄色のグラデーションになり、70%緑→105%黄色のグラデーションが続きます。
しかし表示は100%～105%のところは表示されないので、一番右側は少し緑がかった黄色になっています。
反復グラデーションの応用で、縞模様を作ることができます。
<div style="width: 200px; height: 200px; background: repeating-linear-gradient(135deg, red 0px, red 3px, white 3px ,white 12px);">縞模様</div>
red 0px, red 3pxで、３ピクセル幅の赤になります。続いて、white 3px ,white 12pxで3px～12px＝９ピクセル幅の白になります。
それが反復するので、縞模様になっています。
さらに応用で、チェック模様を作ることができます。
<div style="width: 200px; height: 200px; background: repeating-linear-gradient(45deg, rgba(255,0,0,0.5) 0px, rgba(255,0,0,0.5) 20px, rgba(255,255,255,0.5) 20px ,rgba(255,255,255,0.5) 30px),repeating-linear-gradient(135deg, rgba(255,0,0,1) 0px, rgba(255,0,0,1) 20px, rgba(255,255,255,1) 20px ,rgba(255,255,255,1) 30px);">チェック</div>
<div style="width: 200px; height: 200px; background: repeating-linear-gradient(45deg, gold 0px, gold 1px, transparent 1px, transparent 10px),repeating-linear-gradient(135deg, gold 0px, gold 2px, transparent 2px, transparent 10px);">チェックというより、金網？</div>
<div style="width: 200px; height: 200px; background: repeating-linear-gradient(-30deg, #FFF5 0px, #FFF5 5px, transparent 5px, transparent 20px),repeating-linear-gradient(30deg, #FFF5 0px, #FFF5 5px, transparent 5px, transparent 20px),purple;">３つ重ね</div>
２つの反復線形グラデーションを９０度交差して重ねれば、チェック模様ができます。 この時も上のレイヤーに透明色が無いと、ダメです。
２つ目の例で出てくるtransparentは、完全な透明色を表します。
３つめは最下層に単色の紫を置き、その上に「半透明な白」と「透明」の縞模様を２つ角度を替えておくことで、ひし形模様を作っています。