CSS【 background】2 ~ background-imageでレイヤーやグラデーションも

colmun_main4378

背景に関するプロパティの中に、background-imageプロパティがあります。
background-imageプロパティは、背景に画像を表示させる際に使用するプロパティですが、CSS3から、画像の重ね表示やグラデーションの指定もできるようになりました。
今回は、このbackground-imageプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background】1 ~ 背景プロパティの種類とbackground-color

目次

1.background-imageプロパティ
2.レイヤーの指定
3.グラデーションの指定

1.background-imageプロパティ

background-imageプロパティは、背景画像を指定する際に使用します。
背景に重ね画像やグラデーションを指定する場合も、background-imageプロパティを使用します。

background-imageプロパティで指定する値には、次のようなものがあります。

none 背景画像なし(デフォルト値)
url(画像のURL) 表示する画像ファイルのURL
linear-gradient() ()内に色や位置等を記載して線形グラデーションを指定
radial-gradient() ()内に色や位置等を記載して円形グラデーションを指定

background-imageプロパティの値は、継承されません。
また、background-imageプロパティは、全ての要素で使用できます。

colmun_image4378_01
上の画像を背景に指定すると、次のような表示になります。

background-image:url(img/sky.jpg);

 
ソースは次の通りです。

(CSS)
div#sample {
margin:0;
padding:2em;
background-color:#6CF;
background-image:url(img/sky.jpg);}

(HTML)
<div id=”sample”>
background-image:url(img/sky.jpg);
</div>

background-colorプロパティで、背景色を指定しています。
背景色を指定してbackground-imageプロパティで画像を指定すると、背景色の上に画像が表示されます。
レイヤーの構造として、背景色は一番下となります。

▲目次へ戻る

2.レイヤーの指定

CSS3から、background-imageプロパティで重ね画像を指定できるようになりました。
画像のURLをカンマ(,)で区切って指定します。
レイヤーの構造としては、先に指定した画像が上に表示されます。

colmun_image4378_02
先ほどの画像の前に、上の画像を指定すると、次のような表示になります。

background-image:url(img/snow.jpg),url(img/sky.jpg);

 
ソースは次の通りです。

(CSS)
div#sample {
margin:0;
padding:2em;
background-color:#6CF;
background-image:url(img/snow.jpg),url(img/sky.jpg);}

(HTML)
<div id=”sample”>
background-image:url(img/snow.jpg),url(img/sky.jpg);
</div>

背景に複数の画像を使う場合は、CSS3に対応していない古いブラウザ対策として、background-colorプロパティを指定しておいた方が安心です。

▲目次へ戻る

3.グラデーションの指定

CSS3から、background-imageプロパティで背景にグラデーションも指定できるようになりました。

線形グラデーション

線形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色を定義して作成します。
背景に線形グラデーションを設定したい場合は、background-imageプロパティにlinear-gradient()を指定します。

linear-gradient()は関数で、次のように()内を指定します。

linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);

指定が必須なのは、開始色終了色のみで、色の指定方法はCSSの色指定と同じです。

開始位置と角度のデフォルト値は「180deg to bottom」で、上から下という意味です。
角度はdegという単位を使います(デフォルト値は180deg)。
下から上の方向が0、そこから時計回りで左から右の方向が90deg、上から下の方向が180deg、右から左の方向が270deg、となります。
方向は、toとleft、right、top、bottomを組み合わせて使います(デフォルト値はto bottom)。
to right bottom(右斜め下へ)というような指定もできます。

線形グラデーションを指定すると、次のような表示となります。

線形グラデーション

 
ソースは次の通りです。

(CSS)
div#sample {
margin:0;
padding:2em;
background-color:plum;
background-image:linear-gradient(#FFFAFA, #969);}

(HTML)
<div id=”sample”>
線形グラデーション
</div>

背景に線形グラデーションを指定する場合も、CSS3に対応していない古いブラウザ対策として、background-colorプロパティを指定しておいた方が安心です。

また、途中色を複数指定して、次のようなグラデーションを表示することもできます。

多色の線形グラデーション

 
CSSソースのグラデーション指定箇所は次の通りです。

background-image:linear-gradient(to left, red, orange, yellow, green, slateblue, purple, violet);

 

円形グラデーション

円形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色、グラデーションの形状を定義して作成します。
背景に円形グラデーションを設定したい場合は、background-imageプロパティにradial-gradient()を指定します。

radial-gradient()は関数で、次のように()内を指定します。

radial-gradient(形状またはサイズ at 開始位置, 開始色, 途中色, 終了色);

指定が必須なのは、開始色終了色のみで、色の指定方法はCSSの色指定と同じです。

形状 ellipse(楕円)・・・デフォルト値
circle(円)
サイズ farthest-corner(一番遠い角に合わせる)・・・デフォルト値
closest-side(一番近い辺に合わせる)
closest-corner(一番近い角に合わせる)
farthest-side(一番遠い辺に合わせる)
開始位置(円の中心点) center・・・デフォルト値
left
right
top
bottom
◯% ◯%
◯px ◯px

 
円形グラデーションを指定すると、次のような表示となります。

円形グラデーション

 
ソースは次の通りです。

(CSS)
div#sample {
margin:0;
padding:2em;
background-color:plum;
background-image:radial-gradient(crimson,plum);}

(HTML)
<div id=”sample”>
円形グラデーション
</div>

背景に円形グラデーションを指定する場合も、CSS3に対応していない古いブラウザ対策として、background-colorプロパティを指定しておいた方が安心です。

また、円の中心点の位置を変えて、次のようなグラデーションを表示することもできます。

円の中心点を左にずらした円形グラデーション

 
CSSソースのグラデーション指定箇所は次の通りです。

background-image:radial-gradient(circle closest-corner at 25% 25%, crimson,plum);

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です