CSS
背景

前書き

構文

• 背景色：色|透明な|最初の|継承する;
• 背景画像：URL |なし|最初の|継承する;
• バックグラウンド位置：値;
• 背景サイズ：<bg-size> [<bg-size>]
• <bg-size>：auto |長さ|カバー| |含まれる|最初の|継承する;
• バックグラウンドリピート：リピート|リピート-x |リピート-y |ノーリピート|最初の|継承する;
• background-origin：パディングボックス|ボーダーボックス|コンテンツボックス|最初の|継承する;
• 背景 - クリップ：border-box |パディングボックス|コンテンツボックス|最初の|継承する;
• background-attachment：スクロール|固定|ローカル|最初の|継承する;
• 背景：bg-color bg-image位置/ bg-size bg-repeat bg-origin bg-クリップbg-attachment initial |継承する;

備考

背景色

background-colorプロパティは、カラー値を使用inheritか、またはtransparent 、 inheritまたはinitialなどのキーワードを使用して、要素の背景色を設定します。

• transparentは、背景色が透明であることを指定します。これはデフォルトです。

• 継承し 、このプロパティを親要素から継承します。

• initialは 、このプロパティをデフォルト値に設定します。

これはすべての要素と::first-letter / ::first-line 擬似要素に適用できます。

CSSの色は、 さまざまな方法で指定できます。

色の名前

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>

• 上記の例は、CSSが単一の色を表現しなければならないいくつかの方法の1つです。

16進数のカラーコード

16進コードは、16進数の16進数表記の色のRGBコンポーネントを示すために使用されます。たとえば、＃ff0000は明るい赤色で、色の赤色成分は256ビット（ff）で、対応する緑色と青色の部分は0（00）です。

3つのRGBペア（R、G、B）の両方の値が同じ場合、カラーコードは3文字（各ペアリングの最初の桁）に短縮できます。 #ff0000に短縮することが可能#f00 、及び#ffffffに短縮することができる#fff 。

16進表記法では大文字と小文字を区別しません。

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

色を宣言する別の方法は、RGBまたはRGBaを使用することです。

RGBは赤、緑、青の略で、赤、緑、青それぞれの小数点の色の値に対応する、ブラケットの間にある0〜255の3つの別々の値が必要です。

RGBaでは、0.0〜1.0の間にアルファパラメータを追加して不透明度を定義できます。

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

色を宣言する別の方法は、HSLまたはHSLaを使用することです。これはRGBおよびRGBaに似ています。

HSLは色相、彩度、明度の略で、HLSとも呼ばれます。

• 色相はカラーホイールの度合いです（0〜360）。
• 彩度は0％〜100％の割合です。
• 明度も0％から100％の間のパーセンテージです。

HSLaでは0.0〜1.0の間にアルファパラメータを追加して不透明度を定義できます。

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

背景画像との相互作用

次のステートメントはすべて同等です。

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

それらはすべて、赤い色が画像の下に表示され、画像の部分が透明であるか、画像が表示されない（おそらくbackground-repeat結果として）。

以下は同等ではないことに注意してください。

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

ここでは、 backgroundの値がbackground background-imageよりも優先されます。

backgroundプロパティの詳細については、 background グラウンドの短縮形を参照してください。

背景画像

background-imageプロパティは、一致するすべての要素に適用される背景イメージを指定するために使用されます。デフォルトでは、この画像はマージンを除いて要素全体をカバーするように並べられています。

.myClass {
  background-image: url('/path/to/image.jpg');
}

複数のイメージをbackground-imageイメージとして使用するには、カンマ区切りのurl()

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

画像は、最初に宣言された画像を他の画像の上に重ねて順番にスタックします。

背景画像のためのより多くのCSS

これに続く属性は非常に有用でほとんど必須です。

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

背景グラデーション

グラデーションは新しいイメージタイプで、CSS3で追加されました。イメージとして、グラデーションはbackground-imageプロパティ、またはbackground省略形で設定されます。

勾配関数には、線形と放射状の2種類があります。各タイプには、非繰り返し型と繰り返し型があります。

• linear-gradient()
• repeating-linear-gradient()
• radial-gradient()
• repeating-radial-gradient()

線形勾配（）

linear-gradient構文は次のとおりです

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

たとえば、これは右から開始して赤から青への線形勾配を作成します

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

水平および垂直の開始位置の両方を宣言することによって、 diagonal勾配を作成することができます。

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

グラデーション内に任意の数のカラーストップをカンマで区切って指定することができます。次の例では、8つのカラーストップでグラデーションを作成します

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

放射状勾配（）

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

反復勾配

勾配関数を繰り返すことは、上記の例と同じ引数をとりますが、要素の背景に勾配を描きます。

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

カラー名の代わりに、HEX、RGB、RGBa、HSL、およびHSLaのカラーコードを使用できます。説明のために色の名前を使用しました。また、放射状の勾配構文は線形勾配よりはるかに複雑であり、簡略化されたバージョンがここに示されていることにも注意してください。詳細な説明と仕様については、 MDN Docsを参照してください。

背景短縮

backgroundプロパティは、1つまたは複数の背景関連プロパティを設定するために使用できます。

値の順序は重要ではなく、すべての値はオプションです

構文

背景略式宣言の構文は次のとおりです。

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];  

例

background: red;

単にred値でbackground-colorを設定します。

background: border-box red;

background-clipをボーダーボックスに設定し、 background-clip background-colorを赤に設定します。

background: no-repeat center url("somepng.jpg");

background-repeatからノーリピート、 background-originを中央に、 background-imageをbackground-imageに設定します。

background: url('pattern.png') green;

この例では、要素のbackground-colorはgreenに設定され、使用可能な場合はpattern.pngが色にオーバーレイされ、要素を満たすために必要なだけ頻繁に繰り返されます。 pattern.pngに透明部分が含まれていると、 green色がその背景に表示されます。

background: #000000 url("picture.png") top left / 600px auto no-repeat;

この例では、上に画像 'picture.png'を含む黒い背景があり、画像はどちらの軸でも繰り返されず、左上隅に配置されます。 /位置の後には、この場合のように設定された背景画像のサイズを含むことができることである600px高さの幅と自動。この例は、単色にフェードする機能画像でうまくいくかもしれません。

注記：省略値のバックグラウンドプロパティを使用すると、値が指定されていなくても、以前に設定されたバックグラウンドプロパティ値がすべてリセットされます。以前に設定したバックグラウンドのプロパティ値を変更したい場合は、代わりにlonghandプロパティを使用します。

背景の位置

background-positionプロパティは、背景画像またはグラデーションの開始位置を指定するために使用されます

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

位置はX座標とY座標を使用して設定され、CSS内で使用されているいずれかの単位を使用して設定されます。

CSSの単位は、さまざまな方法で指定できます（ ここを参照）。

ロング・バックグラウンド位置のプロパティ

上の短縮形のプロパティに加えて、背景の背景のプロパティbackground-position-xとbackground-position-y使用することもできます。これにより、xまたはyの位置を別々に制御することができます。

注：これは、Firefox（バージョン31-48） 2を除くすべてのブラウザでサポートされています。 2014年9月にリリースされるFirefox 49は、これらのプロパティをサポートします。それまでは、 Stack Overflowの答えにFirefoxのハックがあります。

背景アタッチメント

background-attachmentプロパティは、背景イメージが固定されているか、ページの残りの部分でスクロールされているかを設定します。

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}

例

背景アタッチメント：スクロール

デフォルトの動作では、ボディをスクロールすると背景がスクロールします。

body {
  background-image: url('image.jpg');
  background-attachment: scroll;
}

背景添付：固定

背景画像は固定され、ボディがスクロールされると移動しません。

body {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

背景添付：ローカル

divの内容がスクロールされると、divの背景イメージがスクロールします。

div {
  background-image: url('image.jpg');
  background-attachment: local;
}

背景の繰り返し

background-repeatプロパティは、背景イメージが繰り返されるかどうかを/設定します。

デフォルトでは、背景画像は垂直方向と水平方向の両方で繰り返されます。

div {
  background-image: url("img.jpg");
  background-repeat: repeat-y;
}

background-repeat: repeat-yようになります：

不透明度のある背景色

要素にopacityを設定すると、その要素すべてに影響します。要素の背景だけに不透明度を設定するには、RGBAカラーを使用する必要があります。次の例では、0.6の不透明度を持つ黒い背景が表示されます。

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

複数の背景画像

CSS3では、同じ要素に複数の背景を重ねることができます。

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

画像は、最初の背景が上に、最後の背景が後ろに重ねて重ねられます。 img_1が上に表示され、 img_2とimg_3が下に表示されます。

これにバックグラウンド省略プロパティを使用することもできます：

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

画像とグラデーションを積み重ねることもできます：

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

• デモ

背景原点プロパティ

background-originプロパティは、背景イメージの配置場所を指定します。

注意： background-attachmentプロパティがfixedに設定されているfixed 、このプロパティは無効です。

デフォルト値： padding-box

可能な値：

• padding-box - 位置はパディングボックスを基準にしています
• border-box - 位置は境界ボックスに相対的です
• content-box - 位置はコンテンツボックスに相対的です
• initial
• inherit

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

結果：

もっと：

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

バックグラウンドクリップ

定義と使用法： background-clipプロパティは、背景のペイント領域を指定します。

デフォルト値： border-box

値

• border-boxはデフォルト値です。これにより、背景を要素の境界線の外側の端にまで広げることができます。
• padding-boxは、要素のパディングの外側の端に背景をクリップし、それが境界に伸びないようにします。
• content-boxは、コンテンツボックスの端に背景をクリップする。
• inheritは、選択した要素に親の設定を適用します。

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

バックグラウンドサイズ

総括

background-sizeプロパティは、 background-imageスケーリングを制御することを可能にする。それは、垂直方向および水平方向の結果画像のスケール/サイズを決定する2つの値を取ります。プロパティがない場合は、 widthとheight両方がautoとみなされます。

autoを指定すると、画像のアスペクト比が維持されます。高さはオプションで、 autoと見なすことができます。したがって、256ピクセル×256ピクセルの画像では、次のbackground-size設定ですべて高さと幅が50ピクセルの画像が生成background-sizeます。

background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;

したがって、次の画像（前述のサイズが256ピクセル×256ピクセル）から始めた場合、

私たちは要素の背景に含まれるユーザーの画面に50ピクセル×50ピクセルで終了します。

パーセンテージ値を使用して、要素に対して画像を拡大/縮小することもできます。次の例では、200ピクセル×133ピクセルの描画画像が得られます。

#withbackground {
    background-image: url(to/some/background.png);

    background-size: 100% 66%;
    
    width: 200px;
    height: 200px;

    padding: 0;
    margin: 0;
}

その振る舞いはbackground-origin依存する。

アスペクト比を維持する

previosセクションの最後の例では、元のアスペクト比が失われました。円は楕円になり、正方形は長方形になり、三角形は別の三角形になります。

長さまたはパーセントのアプローチは、常にアスペクト比を維持するのに十分なほど柔軟ではありません。要素のどの次元が大きくなるかわからない場合があるので、 autoは役に立ちません。しかし、特定の領域を画像で完全に覆い（または正しいアスペクト比）、正しいアスペクト比の画像を背景領域に完全にcontain 、値、 containおよびcoverが追加機能を提供します。

containとcoverための卵の採取

申し訳ありませんが、私たちはデビューのためにBiswarup Gangulyによって今日の写真を使用するつもりです。これはあなたの画面で、灰色の部分は見える画面の外にあると言います。デモンストレーションのために、我々は16×9の比率を仮定します。

前述の日の写真をバックグラウンドとして使用したいと考えています。しかし、何らかの理由で画像を4×3に切り取った。 background-sizeプロパティを固定長に設定することもできますが、 containとcover焦点を当てcontain 。私は、 body幅や高さを変えていないとも仮定しています。

contain

contain

幅と高さの両方がバックグラウンドの位置決め領域内に収まるように、その固有のアスペクト比（存在する場合）を最大のサイズに維持しながら、画像を拡大/縮小します。

これにより、バックグラウンドイメージが常にバックグラウンドの位置決め領域に完全に含まれていることが確認されますが、この場合はbackground-colorで塗りつぶされた空白があります：

cover

cover

画像の幅と高さの両方がバックグラウンドの位置決め領域を完全に覆うように、その固有のアスペクト比（存在する場合）を最小サイズに維持しながら画像を拡大/縮小します。

これは、背景イメージがすべてをカバーしていることを確認します。目に見えるbackground-colorはありませんが、画面の比率によっては画像の大部分が途切れることがあります：

実際のコードによるデモンストレーション

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

background-blend-modeプロパティ

.my-div {
    width: 300px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
    background-blend-mode:saturation;
}

<div class="my-div">Lorem ipsum</div>

結果はこちら： https : //jsfiddle.net/MadalinaTn/y69d28Lb/

CSSシンタックス：background-blend-mode：normal |乗算|スクリーン|オーバーレイ|ダークン| |カラードッジ|彩度|カラー|光度;