CSSを使用してHTML要素に背景スタイルを適用する方法

投稿日: 2022-07-14 2022-10-16
タグ: css, Development

序章

Webサイトを構築する場合、背景のスタイリングはデザインの視覚的美学に大きな役割を果たします。ボタンを作成する場合でも、大きなインタラクティブエリアを作成する場合でも、背景スタイルは定義を提供し、特定の目的のためにエリアを区別できます。 CSSのプロパティのバックグラウンドファミリで何が可能かを理解すると、より効率的なコードと視覚的に興味深いデザインを作成するのに役立ちます。

このチュートリアルでは、要素のグリッドを作成し、それぞれが要素に背景を適用するさまざまな方法を示します。グループ化された一連の例を作成することにより、参照ツールとさまざまな背景プロパティを試す場所ができあがります。 18の背景色、画像、グラデーションのバリエーションのシートを作成します。各バリエーションは、特定の効果を実現するために背景関連のプロパティを使用します。最後のバリエーションは、単一の要素で多くのアプローチを組み合わせて、複数の背景効果を作成します。

前提条件

カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
CSSで色の値を使用する方法にある、色の値に関する知識。
ローカルマシンに次のように保存された空のHTMLファイル index.html 選択したテキストエディタとWebブラウザからアクセスできます。開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズを使用してWebサイトを構築する方法全体を試してください。

初期HTMLとCSSの設定

バックグラウンドスタイリングの操作を開始するには、最初に、チュートリアルの残りの部分で作業するHTMLおよびCSSコードを設定します。このセクションでは、レイアウトを処理し、視覚的な美学の基礎を設定する、必要なすべてのHTMLといくつかの初期CSSスタイルを書き出します。

開くことから始めます index.html テキストエディタで。次に、次のHTMLをファイルに追加します。

index.html

<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

次に、 <head> タグを付けて追加します <meta> HTMLファイルの文字セットを定義するタグ。ページのタイトルを設定し、 <meta> モバイルデバイスがページをレンダリングする方法を定義するタグ。最後に、後で作成するCSSファイルをロードします。 <link> 鬼ごっこ。

これらの追加は、次のコードブロックで強調表示されています。コードが追加および変更されると、チュートリアル全体でこの強調表示方法に遭遇します。

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Background Styles Resource</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

追加した後 <head> コンテンツ、に移動します <body> タイトルとベースを追加する要素 <div> 私たちのグリッドのために。このコードブロックから強調表示されたセクションを index.html テキストエディタのファイル：

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Background Styles Resource</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Background Styles Resource</h1>
    <div class="grid">
    </div>
  </body>
</html>

The <h1> ページの内容を説明する見出しを提供します。 The <div> 要素と grid class 属性には、チュートリアル全体で追加された残りのすべてのHTMLが含まれます。

変更をに保存します index.html テキストエディタで開いたままにします。次に、先に進んで開きます index.html Webブラウザで。チュートリアルでは、テキストエディタとブラウザを切り替えて、コードに加えられた変更を確認します。

次に、テキストエディタに戻り、というファイルを作成します styles.css. これは、で参照したファイルです。 <head> あなたの要素 index.html. の中に styles.css ファイルに、次のコードを追加します。

styles.css

body {
  font-family: system-ui, sans-serif;
  color: #333;
}

h1 {
  text-align: center;
}

The body 要素セレクターは、ページのフォントをデフォルトのセリフからオペレーティングシステムのフォント（サポートされている場合）に変更してから、サンセリフフォントにフォールバックします。 The h1 セレクターはテキストをページの中央に配置します。

次に、包括的なレイアウトプロパティのコレクションである CSSGridをに追加します。 .grid クラスセレクター。次のコードブロックの強調表示されたCSSは、何が追加されるかを示しています styles.css:

styles.css

...
h1 {
  text-align: center;
}

.grid {
  width: 90%;
  max-width: 80rem;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  grid-gap: 1.5rem;
}

このセレクターのプロパティは、柔軟な設定になります width とともに max-width そのため、ページのサイズを変更して幅を調整できます。それはまた設定します margin グリッドの上下にスペースを設定するプロパティ。次に、グリッドを定義するために必要なプロパティを適用します。

The display プロパティにより、要素はCSSグリッドを使用します。 grid 価値。それが設定されると、他の2つのプロパティ、 grid-template-columns と grid-gap、の内容に影響を与えるようになります .grid 要素。後で追加します。 The grid-template-columns あると述べています 3 列とそれらの最小幅は 100px との最大幅 1fr 全幅の（分数）。 3つの列があるため、その割合は33.333％になります。最後に、 grid-gap グリッドの各行と列の間にあることを定義します 1.5rem 間隔。

次に、後のセクションで作成するHTML用のクラスセレクターをさらに2つ追加します。追加します .item クラスセレクター。各バリエーションのグリッドアイテムに適用されます。次に、 .preview クラスセレクター。背景スタイルのデモが含まれます。次のコードブロックで強調表示されているCSSは、これを設定する方法を示しています。

styles.css

...
.grid {
  ...
}

.item {
  border: 1px solid #999;
  background-color: white;
}

.preview {
  height: 16rem;
  border-bottom: 1px solid #999;
}

これで、開始点が設定されました。 index.html と styles.css ファイル。続行する前に、必ず両方のファイルへの変更を保存してください。

このチュートリアルのセットアップの最後の部分では、の横に新しいディレクトリ（またはフォルダ）を作成します index.html と styles.css と呼ばれるファイル images. 次の各画像をダウンロードして、この新しく作成された画像に追加します images ディレクトリ：

繰り返し可能なパターン：名前を付けて保存 pattern.png.
X軸繰り返し可能パターン：名前を付けて保存 pattern-x.png.
Y軸繰り返し可能パターン：名前を付けて保存 pattern-y.png.
ハチドリの写真：名前を付けて保存 photo.jpg. （UnsplashのMarkOlsen による写真）

このセクションでは、チュートリアルの残りの部分でコードをサポートするHTMLとCSSを準備しました。また、デモ画像をダウンロードして、 images あなたの横にあるディレクトリ index.html と styles.css ファイル。次のセクションでは、 background-color と background-image.

使用する `background-color` と `background-image` 要素について

HTML要素には、色または画像の2種類の背景のいずれかを入力できます。 CSSで生成されたグラデーションは一種の画像であり、チュートリアルの後半で説明します。このセクションでは、要素に色付きの背景を適用してから、要素の背景として画像ファイルをロードします。

開くことから始めます index.html テキストエディタで、次のコードブロックから強調表示されたHTMLを <div class="grid"> エレメント：

index.html

...
<div class="grid">
  <div class="item">
    <div class="preview style-01"></div>
    <div class="item-info">
      <h2>Background Color</h2>
    </div>
  </div>
</div>
...

チュートリアル全体で作成するバリエーションごとに、このHTML形式を使用します。バリエーションからバリエーションへと変化するのは class 属性値。バリエーションごとに数が増加します。 The <h2> 要素には、そのバリエーションに対応するタイトルがあります。

変更をに保存します index.html そして開く styles.css テキストエディタで。

後に .preview クラスセレクター、という新しいクラスセレクターを追加します .style-01. 次に、新しいセレクターブロックに、 background-color 名前付きの値が deeppink. 次のコードブロックで強調表示されているCSSは、これがどのように表示されるかを示しています。

styles.css

...
.preview {
  height: 16rem;
}

.style-01 {
  background-color: deeppink;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. 次の画像に示すように、最初のバリエーションでピンクの画像が表示されます。

The background-color プロパティは、RGBAやHSLAなどのアルファチャネルを持つ色を含む、すべての有効なCSS色を受け入れます。アルファチャネルを使用して、背景色に透明度を与えることができます。

次に、に戻ります index.html 新しいバリエーションを追加します。今回はクラスを次のようにインクリメントします。 style-02. また、 <h2> 要素のテキストを Background Image. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-02"></div>
    <div class="item-info">
      <h2>Background Image</h2>
    </div>
  </div>
</div>
...

変更をに保存します index.html、次に開きます styles.css テキストエディタで。追加する .style-02 クラスセレクター、次に追加 background-image 財産。ロードするには photo.jpg 背景としてファイル、最初に作成します url() 値として機能します。次に、の括弧内 url() 次のコードブロックで強調表示されているCSSが示すように、関数、ファイルへのパスを追加します。

styles.css

...
.style-01 {
  ...
}

.style-02 {
  background-image: url("./images/photo.jpg");
}

変更をに保存します styles.css その後、更新します index.html Webブラウザで。プレビューエリアには、の一部のみが表示されます photo.jpg 画像のサイズがプレビュー領域のサイズよりも大きいため、画像。デフォルトでは、背景画像は元のピクセルサイズで表示されるため、画像が完全に表示されません。次の画像は、これがブラウザにどのように表示されるかを示しています。

このセクションでは、最初の2つの背景バリエーションを設定します。最初に使用された background-color プロパティ、および2番目の使用 background-image 財産。次に、4つのバリエーションを作成して、 background-repeat 財産。

で画像をタイリング `background-repeat` 財産

背景画像を要素にロードできるようになったので、繰り返しパターン画像を使用して画像をタイリングするさまざまな方法で作業します。デフォルトでは、 background-image x軸とy軸に沿ってタイルパターンとして繰り返されますが、その繰り返しを制御して、単一の軸に沿ってのみ繰り返すか、まったく繰り返さないようにすることができます。このセクションでは、 background-repeat 4つの異なる繰り返しシナリオを制御するプロパティ。

まず、開く index.html テキストエディタで、次のクラスのグリッドに新しいアイテムを追加します style-03 と <h2> と Background Repeat. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-03"></div>
    <div class="item-info">
      <h2>Background Repeat</h2>
    </div>
  </div>
</div>
...

次に、変更をに保存します index.html 開いて styles.css テキストエディタで。のクラスセレクターを作成する .style-03. セレクターブロック内に、 background-image とともに url() をロードする関数 pattern.png あなたからの画像 images 次のコードブロックで強調表示されているフォルダ：

styles.css

...
.style-02 {
  ...
}

.style-03 {
  background-image: url("./images/pattern.png");
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. The pattern.png 画像は、要素全体を埋め尽くす終わりのない画像のように見える繰り返し可能なタイルとして設定されます。この要素のスタイルは、次の画像に示すようにブラウザに表示されます。

この画像は左上隅から繰り返され、右下に向かって連続的に拡大していることに注意してください。これは、任意のデフォルトの状態です background-image、このようなシームレスなパターンまたはより厳密な繰り返しを作成できます。このデフォルトを作成するプロパティは background-repeat の値に設定 repeat.

とともに background-repeat プロパティでは、左から右にのみ繰り返すシームレスなパターンを作成することもできます。この種のリピートを使用できるエフェクトには、穴の開いたエッジのようにコンテナの上部に沿ったギザギザの形状など、さまざまな種類があります。これを使用して、下部に端から端まで定型化された二重線のグラフィックスパンを作成することもできます。を設定することにより background-repeat プロパティに repeat-x、x軸のみに沿って背景を繰り返すようにブラウザに指示できます。

x軸に沿って作業を開始するには、に戻ります。 index.html テキストエディタで。次に、クラスが次の新しいHTMLブロックをグリッドに追加します。 style-04 と <h2> と Background Repeat X. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-04"></div>
    <div class="item-info">
      <h2>Background Repeat X</h2>
    </div>
  </div>
</div>
...

変更をに保存します index.html 開いて styles.css テキストエディタで。作成する .style-04 クラスセレクター background-image プロパティの読み込み pattern-x.png あなたのファイル images ディレクトリ。この画像は、要素の上部のx軸に沿って繰り返されるように設計されています。次に、 background-repeat 値がに設定されたプロパティ repeat-x、次のコードブロックで強調表示されているように：

styles.css

...
.style-03 {
  ...
}

.style-04 {
  background-image: url("./images/pattern-x.png");
  background-repeat: repeat-x;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. デフォルトでは、背景画像の繰り返しは要素の左上隅から始まります。したがって、次の画像に示すように、パターンはプレビュー要素の領域の上部に沿って左から右に繰り返されます。

背景を左から右に繰り返すように設定できるのと同じように、背景を上から下に繰り返すように設定することもできます。これを行うには、 background-repeat プロパティに repeat-y、y軸に沿って画像を1列に繰り返します。これは、コンテナの左側または右側の端に沿って視覚効果を作成する場合に役立ちます。

y軸の使用を開始するには、 index.html テキストエディタで、次のクラスのグリッドに新しいアイテムを追加します style-05 と <h2> と Background Repeat Y. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-05"></div>
    <div class="item-info">
      <h2>Background Repeat Y</h2>
    </div>
  </div>
</div>
...

次に、変更をに保存します index.html 開いて styles.css テキストエディタで。 x軸の例と同様に、次のクラスセレクターを作成します .style-05 を追加します background-image 財産。今回は、 background-image を指す値 pattern-y.png 画像。次に、 background-repeat プロパティを設定し、値をに設定します repeat-y、次のコードブロックで強調表示されているように：

styles.css

...
.style-04 {
  ...
}

.style-05 {
  background-image: url("./images/pattern-y.png");
  background-repeat: repeat-y;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. 次の画像に示すように、パターンはプレビュー要素の左端に沿って繰り返されます。

多くの場合、背景画像をまったく繰り返さないようにすると便利です。これは、ビジュアルグラフィックがHTMLではなく背景として追加された場合に発生する可能性があります <img />、ロゴやアイコンで時々行われるような。繰り返しを完全に無効にするには、 background-repeat プロパティに no-repeat 価値。

開始するには、に戻ります index.html テキストエディタで、次のクラスのグリッドに別のアイテムを追加します style-06 と <h2> 要素と Background No Repeat. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-06"></div>
    <div class="item-info">
      <h2>Background No Repeat</h2>
    </div>
  </div>
</div>
...

変更をに保存します index.html 開いて styles.css テキストエディタで。追加します .style-06 クラスセレクターと、セクションの最初のバリエーションと同様に、 background-image ロードするプロパティ pattern.png 背景画像としてファイル。次に、 background-repeat 値に設定されたプロパティ no-repeat. 画像は、連続したタイルの繰り返しではなく、1回だけ表示されます。次のコードブロックの強調表示されたCSSは、これが styles.css ファイル：

styles.css

...
.style-05 {
  ...
}

.style-06 {
  background-image: url("./images/pattern.png");
  background-repeat: no-repeat;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. これで、の単一のインスタンスがあります pattern.png 次の画像に示すように、プレビュー要素の左上隅にある画像：

このセクションでは、 background-repeat プロパティのデフォルト値 repeat. また、タイル画像を水平方向に繰り返しました。 repeat-x 値と垂直方向に repeat-y 価値。最後に、画像が繰り返されないようにしました no-repeat 価値。次のセクションでは、 background-position 要素のどこに背景画像を固定するかを設定するプロパティ。

で背景画像の配置を調整する `background-position`

で作業するとき background-image、画像はデフォルトで要素の左上隅に配置されていることを知っておくことが重要です。ただし、特に画像が繰り返されない場合は、要素内に背景画像を設定する場所ではない可能性があります。このセクションでは、 background-position 画像の最初のインスタンスが要素のどこに固定されているかを変更するプロパティ。

で作業を開始するには background-position、開いた index.html テキストエディタで、次のクラスのグリッドに新しいアイテムを追加します style-07 と <h2> と Background Position. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-07"></div>
    <div class="item-info">
      <h2>Background Position</h2>
    </div>
  </div>
</div>
...

次に、変更をに保存します index.html 開いて styles.css テキストエディタで。

のクラスセレクターを作成する .stlye-07. このセクションのCSSブロックごとに、 pattern.png のファイル background-image を設定します background-repeat プロパティに no-repeat、位置をより識別しやすくするため。最後に、 background-position プロパティとの名前付きの値を使用します bottom right 一緒に画像をデフォルトから隣接するコーナーに固定します。次のコードブロックの強調表示されたCSSは、これがどのように記述されるかを示しています。

styles.css

...
.style-06 {
  ...
}

.style-07 {
  background-image: url("./images/pattern.png");
  background-repeat: no-repeat;
  background-position: bottom right;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. 現在、の単一のインスタンスがあります pattern.png 次の画像に示すように、プレビュー要素の右下隅に表示されるファイル：

The background-position プロパティは、軸ごとに1つずつ、2つの名前付き値を受け入れることができます。 x軸の場合、これらの値は次のとおりです。 left, center、と right. y軸の場合、値は次のとおりです。 top, center、と bottom. The center 名前付きの値は両方の軸に存在し、要素の絶対的な中央に背景画像を配置するために組み合わせることができます。

背景画像を中央に配置するには、まず開いて index.html テキストエディタで、次のクラスのグリッドに新しいアイテムを追加します style-08 と <h2> 要素と Background Position Center. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-08"></div>
    <div class="item-info">
      <h2>Background Position Center</h2>
    </div>
  </div>
</div>
...

次に、変更をに保存します index.html 開いて styles.css テキストエディタで。作成する .style-08 クラスセレクターと追加 background-image プロパティの読み込み pattern.png そしてその background-repeat プロパティをに設定 no-repeat 前のバリエーションと同じように。あなたは設定することができます background-position の単一の名前付き値へのプロパティ center ブラウザは、x軸とy軸の両方の位置にこの名前を使用することを理解します。次のコードブロックの強調表示されたCSSは、これがどのように設定されているかを示しています。

styles.css

...
.style-07 {
  ...
}

.style-08 {
  background-image: url("./images/pattern.png");
  background-repeat: no-repeat;
  background-position: center;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. の単一インスタンス pattern.png 次の画像に示すように、はプレビュー要素の中央に浮かんでいます。

名前付きの値とともに数値を使用して、の開始位置を定義することもできます。 background-image. これは、要素のエッジから背景画像を一定または相対的な量だけオフセットする場合に役立ちます。

まず、に戻ります index.html テキストエディタで、次のクラスのグリッドに別のアイテムを追加します style-09 と <h2> 要素と Background Position Numeric. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-09"></div>
    <div class="item-info">
      <h2>Background Position Numeric</h2>
    </div>
  </div>
</div>
...

変更をに保存します index.html 開いて styles.css テキストエディタで。次に、 .style-09 クラスセレクター background-image ロードするプロパティ pattern.png ファイルと background-repeat とのプロパティ no-repeat 価値。次に、 background-position の値を持つプロパティ right 10% bottom 40px、次のコードブロックで強調表示されているように：

styles.css

...
.style-08 {
  ...
}

.style-09 {
  background-image: url("./images/pattern.png");
  background-repeat: no-repeat;
  background-position: right 10% bottom 40px;
}

The right 10% の一部 background-position プロパティはアンカーします background-image 10% of要素の右からの幅。そうして bottom 40px を設定します background-image 要素の下から40px。

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. 次の画像に示すように、パターン画像は要素の右下部分に表示されますが、エッジからある程度の間隔があります。

このセクションでは、 background-position 単語の値を使用して背景画像をさまざまな位置に固定するプロパティ bottom と center、および単語値と組み合わせた数値。次のセクションでは、 background-size 要素内の背景画像のサイズを変更するプロパティ。

を使用して背景画像のサイズを変更する `background-size` 財産

要素に背景として読み込まれた画像は、完全なピクセルサイズで配置されます。たとえば、背景に使用される画像ファイルのピクセルサイズが800⨉600で、適用される要素が400⨉300の場合、背景画像の25% ofが表示されます。このセクションでは、 background-size サイズを変更するプロパティ background-image ファイル。

サイズ変更を開始するには background-image、開いた index.html テキストエディタで。次に、クラスが次の新しいアイテムをグリッドに追加します。 style-10 と <h2> と Background Size Contain. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-10"></div>
    <div class="item-info">
      <h2>Background Size Contain</h2>
    </div>
  </div>
</div>
...

次に、変更をに保存します index.html 開いて styles.css テキストエディタで。

のクラスセレクターを作成する .style-10. セレクターブロック内に、 photo.jpg ハチドリの画像 background-image. 次に、 background-repeat プロパティに no-repeat そしてその background-position に center、したがって、要素の中心にある画像の反復は1回だけです。最後に、 background-size プロパティと名前付きの値を使用します contain、次のコードブロックで強調表示されているように：

styles.css

...
.style-09 {
  ...
}

.style-10 {
  background-image: url("./images/photo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. 画像は、要素内に完全に含まれるように縮小されます。 background-size の名前付き値 contain 示す。ハチドリの画像が完全に表示されるようになりましたが、 background-size 一部のみが表示されました。次の画像は、これがブラウザにどのように表示されるかを示しています。

次に、 background-size 要素の背景スペースを完全にカバーするようにサイズを変更する値。開くことから始めます index.html テキストエディタで、次のクラスのグリッドに別のアイテムを追加します style-11 と <h2> 要素と Background Size Cover. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-11"></div>
    <div class="item-info">
      <h2>Background Size Cover</h2>
    </div>
  </div>
</div>
...

変更をに保存します index.html 開いて styles.css テキストエディタで。次に、 .style-11 クラスセレクターとコピー background-image, background-repeat、と background-position からのプロパティ .style-10 セレクターブロック。次に、 background-size 名前付きの値を使用するプロパティ cover. 次のコードブロックで強調表示されているCSSは、テキストエディタでこれを記述する方法を示しています。

styles.css

...
.style-10 {
  ...
}

.style-11 {
  background-image: url("./images/photo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html.

The background-image これで要素全体が塗りつぶされますが、収まるように縮小されます。 The cover 値はサイズを変更します background-image 要素の向きに応じて。要素が横向きの場合、つまり高さよりも幅が広い場合は、 background-image 幅が要素と同じになるようにサイズが変更されます。これにより、 background-image この場合、要素よりも背が高くなるため、要素の境界によって切り取られます。次の画像は、その方法を示しています background-image とともに background-size の cover ブラウザに表示されます：

最後に、 background-size valueは数値も受け入れることができます。数値を使用するには、に戻ります。 index.html テキストエディタで。次に、クラスが次の新しいアイテムをグリッドに追加します style-12 と <h2> 要素と Background Size Numeric. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-12"></div>
    <div class="item-info">
      <h2>Background Size Numeric</h2>
    </div>
  </div>
</div>
...

次に、変更をに保存します index.html 開いて styles.css テキストエディタで。作成する .style-12 クラスセレクター。もう一度、同じものをコピーします background-image, background-repeat、と background-position で使用されるプロパティ .style-10 と .style-11 そしてそれらをセレクターブロックに追加します .style-12.

次に、 background-size 数値が 30%. あなたが提供するとき background-size プロパティを単一の数値として使用すると、画像の高さと幅の両方に同じ値が適用されます。画像のアスペクト比を維持するには、単語を追加します auto 後に 30%、これにより、画像の幅が30％に設定され、高さが比例して設定されます。強調表示されたCSSは、 .style-12 セレクターブロックとプロパティがテキストエディターに表示されます。

styles.css

...
.style-11 {
  ...
}

.style-12 {
  background-image: url("./images/photo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30% auto;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. 次の画像に示すように、ハチドリの画像は、要素の中央でその幅の30% ofだけ比例して拡大縮小されます。

このセクションでは、 backround-size 要素内で完全に表示されるように背景画像を拡大縮小するプロパティ contain 価値。あなたは cover 要素全体をカバーしながら画像の多くを表示できるように、背景画像を拡大縮小してサイズを変更するプロパティ。最後に、数値を使用して背景画像を設定されたサイズに拡大縮小し、 auto スケーリングを比例的に保つための値。次のセクションでは、 background-attachment 背景画像がその要素とともにスクロールしないようにするプロパティ。

背景画像を `background-attachment` 財産

The background-attachement プロパティは、 background-image 定常。これにより、コンテンツが画像の上に浮かんでいるかのようにスライドする効果が作成されます。このセクションでは、 background-attachment この効果を作成するためのプロパティ。

開始するには、 index.html テキストエディタで、次のクラスのグリッドに新しいアイテムを追加します style-13 と <h2> と Background Attachment. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-13"></div>
    <div class="item-info">
      <h2>Background Attachment</h2>
    </div>
  </div>
</div>
...

次に、変更をに保存します index.html 開いて styles.css テキストエディタで。

作成する .style-13 クラスセレクター。セレクターブロックに、 background-image ロードするプロパティ pattern.png あなたからのファイル images ディレクトリ。この画像をデフォルトで使用して、画像が繰り返されて要素全体が塗りつぶされるようにします。最後に、 background-attachment 名前付きの値が fixed、次のコードブロックで強調表示されているように：

styles.css

...
.style-12 {
  ...
}

.style-13 {
  background-image: url("./images/pattern.png");
  background-attachment: fixed;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. ページを下にスクロールすると、このバリエーションのプレビュー領域は、背後の背景を見渡すウィンドウのように見える場合があります。このプロパティを使用する際に考慮すべき重要なことは、画像が要素ではなくブラウザのビューポートに固定されていることです。これはに影響します background-position 位置を決定する原点を変更するため。次のアニメーションは、ブラウザでのこの効果を示しています。

このセクションでは、 background-attachment とのプロパティ fixed 背景画像がその要素とともにスクロールしないようにする値。次のセクションでは、これまでのすべてのプロパティを組み合わせて background 略記プロパティ。

プロパティをに組み合わせる `background` 財産

これまでのすべてのCSSプロパティを1つにまとめることができます background 略記プロパティ。このセクションでは、この省略形のプロパティを使用して2つのバリエーションを作成し、通常の使用法と、 background-size 価値。

注： background 省略形は、明示的に宣言されていない場合でも、一部のプロパティ値をオーバーライドできます。例えば、 background オーバーライドします background-image 省略値で画像が提供されていない場合でも値。

速記の使用を開始するには、を開きます index.html テキストエディタで、次のクラスのグリッドに新しいアイテムを追加します style-14 と <h2> と Background Shorthand. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-14"></div>
    <div class="item-info">
      <h2>Background Shorthand</h2>
    </div>
  </div>
</div>
...

次に、変更をに保存します index.html 開いて styles.css テキストエディタで。作成する .style-14 クラスセレクターと追加 background セレクターブロックの省略形プロパティ。値として、 url() ロードする関数 pattern.png あなたから images ディレクトリ。関数の後にスペースを追加し、名前付きの値を追加します center、適用されます background-position 価値。次に、名前付きの値で別のスペースを追加します repeat-x. 最後に、の名前付きカラー値を追加します gold 次のコードブロックで強調表示されているように、行をセミコロンで終了します。

styles.css

...
.style-13 {
  ...
}

.style-14 {
  background: url("./images/pattern.png") center repeat-x gold;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. The pattern.png 画像が読み込まれ、 center と repeat-x 値は、プレビュー要素の垂直方向の中央で左から右にのみ繰り返されます。さらに、プレビュー要素はソリッドで埋められます gold 次の画像に示すように、色：

のために background 省略形では、値は任意の順序にすることができます。画像が最初に来る必要はなく、色が最後に来る必要もありません。ただし、このルールを適用する場合、1つの例外があります。 background-size 速記に。この場合、 background-size 値は後に来る必要があります background-position 値であり、スペースではなくスラッシュ記号（/).

に戻る index.html テキストエディタでファイルします。次に、クラスが次の新しいアイテムをグリッドに追加します。 style-15 と <h2> と Background Shorthand with Size. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-15"></div>
    <div class="item-info">
      <h2>Background Shorthand with Size</h2>
    </div>
  </div>
</div>
...

変更をに保存します index.html 開いて styles.css テキストエディタで。次に、 .style-15 クラスセレクター background 略記プロパティ。同じものを使用する url('./images/pattern.png) 画像用。次に、位置の値をに設定します center、その後にスペース、次にスラッシュ（/). スラッシュの後に、別のスペースを追加してから 64px の値として background-size. 単一の値が使用されるため、 background-size 値、背景画像の高さと幅の両方がに設定されます 64px. 最後に、スペースとダークグレーの省略形の16進値を追加します。 #222. 強調表示されたCSSは、これが styles.css ファイル：

styles.css

...
.style-14 {
  ...
}

.style-15 {
  background: url("./images/pattern.png") center / 64px #222;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. このバリエーションのプレビュー要素では、パターン画像がそのサイズの約半分に拡大縮小され、濃い灰色の背景色で繰り返されます。次の画像は、これがどのように行われるかを示しています background スタイルはブラウザでレンダリングされます。

このセクションでは、 background propertyは、このチュートリアルで使用されるすべてのプロパティを組み合わせた省略形のプロパティです。次のセクションでは、CSSグラデーションを試してみます linear-gradient() 関数。

を使用してグラデーションを作成する `linear-gradient` 関数

あなたは供給することができます background-image 以外の値を持つプロパティ url() 画像ファイル; グラデーションを作成することもできます。 CSSには現在、3つの異なるグラデーション関数があります。 linear-gradient(), radial-gradient()、と conic-gradient(). このセクションでは、 linear-gradient() 2つの色の間に線形グラデーションを作成する機能と、複数の色と定義された角度を持つより複雑なグラデーションを作成します。

設計の観点から、グラデーションには多くの用途があります。それらは、単色よりもダイナミックであるが、写真ほど複雑ではない視覚的美学を提供します。グラデーションを不透明度とともに使用して、写真をより落ち着かせ、オーバーレイするテキストの読みやすさを向上させることもできます。

まず、開く index.html テキストエディタで、次のクラスのグリッドに新しいアイテムを追加します style-16 と <h2> と Linear Gradient. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-16"></div>
    <div class="item-info">
      <h2>Linear Gradient</h2>
    </div>
  </div>
</div>
...

変更をに保存します index.html 開いて styles.css テキストエディタで。次に、 background-image 財産。値として、 linear-gradient() 関数。関数の括弧内に、方向を追加することから始めます。これは、次の単語値を使用できます。 to right. この単語の値は、ブラウザに左から右へのグラデーションを描画するように指示します。次に、コンマに続けて名前付きの色を追加します deeppink. その後、別のコンマと名前付きの色を追加します orange、次のコードブロックで強調表示されているように：

styles.css

...
.style-15 {
  ...
}

.style-16 {
  background-image: linear-gradient(to right, deeppink, orange);
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. ブラウザはでグラデーションを描画します deeppink 左側で色をに移行します orange 次の画像に示すように、右側にあります。

すべてのグラデーションは、固定値またはパーセンテージのいずれかである複数の色値と停止点を可能にします。開始するには、に戻ります index.html テキストエディタで、次のクラスのグリッドに別のアイテムを追加します style-17 と <h2> と Linear Gradient with Stops. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-17"></div>
    <div class="item-info">
      <h2>Linear Gradient with Stops</h2>
    </div>
  </div>
</div>
...

次に、変更をに保存します index.html 開いて styles.css テキストエディタで。追加する background-image とプロパティ linear-gradient() 価値。関数の括弧内に、次の方向を追加します。 175deg. The linear-gradient() 関数は、単語の方向に加えて数値の次数値を受け入れます。最初の色は navy、ただし、次の色のコンマを追加する前に、代わりにスペースを追加して、グラデーション上のこの色の位置をに設定します。 0%. 次に、カンマを追加し、その後に色を追加します dodgerblue で 35% その後にコンマが続きます。このプロセスを次のように続行します skyblue 50%、それから gold 50%、2つの色の間にハードラインを設定します。次に、グラデーションを終了します orange 51% に続く saddlebrown 100%、次のコードブロックで強調表示されたCSSに示されているように：

styles.css

...
.style-16 {
  ...
}

.style-17 {
  background-image: linear-gradient(175deg, navy 0%, dodgerblue 35%, skyblue 50%, gold 50%, orange 51%, saddlebrown 100%);
}

これらの変更をに保存します styles.css 次に、Webブラウザでページを更新します。この色と停止点の進行により、砂漠の地平線の画像のように見える複雑なグラデーションが作成されます。次の画像は、ブラウザでのこのグラデーションのレンダリングを示しています。

このセクションでは、 linear-gradient() CSS関数は、2色のグラデーションと、複数の色とストップポイントで構成されるより複雑なグラデーションを作成します。最後のセクションでは、1つの要素に複数の背景を作成します。

マルチバックグラウンド法を使用して画像とグラデーションを混合する

この最後のセクションでは、このチュートリアルで使用したすべてのものを組み合わせて、単一のプレビュー要素に複数の背景を適用します。複数の背景は、最小限のHTML要素を使用しながら、視覚的に複雑なスタイルを作成するのに役立ちます。

開始するには、 index.html テキストエディタで、最後のアイテムを次のクラスでグリッドに追加します style-18 と <h2> と Multiple Backgrounds. 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。

index.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-18"></div>
    <div class="item-info">
      <h2>Multiple Backgrounds</h2>
    </div>
  </div>
</div>
...

次に、変更をに保存します index.html 開いて styles.css テキストエディタで。作成する .style-18 クラスセレクターと追加 background 財産。複数の背景が長くなる可能性があるため、プロパティ名とは別の独自の行にプロパティ値を配置すると便利な場合があります。この最初の部分では、ハチドリの画像をもう一度読み込みます。 photo.jpg. それから加えて center / cover no-repeat、画像を要素の中央に配置し、画像を繰り返さずにスペースを埋めるように画像を拡大縮小します。次のコードブロックで強調表示されているCSSは、テキストエディタでこれを記述する方法を示しています。

styles.css

...
.style-17 {
  ...
}

.style-18 {
  background:
      url("./images/photo.jpg") center / cover no-repeat
  ;
}

これらの変更をに保存します styles.css、次にWebブラウザに戻り、ページを更新します。次の画像に示すように、ハチドリの画像は要素の中央に配置され、収まるように拡大縮小されます。

複数の背景画像は、ブラウザで読み取られるときに階層化されます。ハチドリの画像の上にグラデーションを追加するには、グラデーションを画像の前に配置する必要があります。 background 価値。複数の背景の各レイヤーはコンマで区切られ、複数のセットを使用できます。 background 省略形の値。

ハチドリの画像をオーバーレイするグラデーションを追加するには、 styles.css ファイルとに .style-18 セレクタ。の間に新しい行を追加します background プロパティと url("./images/photo.jpg") center / cover no-repeat. 次に、 linear-gradient() の単語の方向で to top left 括弧内。カンマを追加し、その後に dodgerblue 10%、それから transparent 80%. 最後に、の閉じ括弧の後 linear-gradient() 次の強調表示されたコードに示すように、複数の背景として区別するために別のコンマを追加します。

styles.css

...
.style-18 {
  background:
    linear-gradient(to top left, dodgerblue 10%, transparent 80%),
    url("./images/photo.jpg") center / cover no-repeat
  ;
}

変更をに保存します styles.css その後、更新します index.html Webブラウザで。グラデーションは、次の画像のブラウザでレンダリングされているように、右下隅の完全な青から左上隅の透明に進むハチドリの画像をオーバーレイします。

次に、プレビュー要素の左側に繰り返し画像の背景オーバーレイをもう1つ追加します。

戻る styles.css テキストエディタで、後に新しい行を追加します background: 財産。使用 url() ロードする関数 pattern-y.png から images ディレクトリ。この後、背景の位置を次のように設定します center left スラッシュを追加して、背景画像のサイズを次のように設定します 64px. 最後に、背景をに設定します repeat-y 垂直方向に繰り返し、背景セットをコンマで終了するようにします。次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css

...
.style-18 {
  background:
    url("./images/pattern-y.png") center left / 64px repeat-y,
    linear-gradient(to top left, dodgerblue 10%, transparent 80%),
    url("./images/photo.jpg") center / cover no-repeat
  ;
}

変更をに保存します styles.css その後、Webブラウザに戻って更新します index.html. 新しい最上層の背景は、要素の左側にあるピンクとオレンジのドットパターンです。次の画像に示すように、パターンはグラデーションとハチドリの画像の両方をオーバーレイしています。

このセクションでは、前のセクションで開発したスキルを使用して、単一の要素に複数の背景を適用しました。複数の背景は、余分なHTMLオーバーヘッドなしで複雑なスタイルを作成するための便利なツールです。複数の背景がないこの同じ効果は、要素を互いに重ねて同じ寸法にするために、いくつかの追加のスタイリングプロパティを持つ少なくとも3つのHTML要素を取ります。

結論

このチュートリアルでは、HTML要素で背景を表示する方法を制御するために、多くのプロパティの例を実行しました。単色を適用し、画像リソースをロードし、グラデーションを作成しました。画像が要素上でどのように並べて繰り返されるかを調整し、背景画像のサイズを変更して、スペースに異なる形で収まるようにしました。また、これらすべてのプロパティを組み合わせて background 速記と複数の背景を構成しました。このチュートリアルから、これらの多くの背景プロパティを操作および組み合わせて新しいものを作成する方法について何度も参照できるリソースを作成しました。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。

getdocs

13036

序章

前提条件

初期HTMLとCSSの設定

使用する background-color と background-image 要素について

で画像をタイリング background-repeat 財産

で背景画像の配置を調整する background-position

を使用して背景画像のサイズを変更する background-size 財産

背景画像を background-attachment 財産

プロパティをに組み合わせる background 財産

を使用してグラデーションを作成する linear-gradient 関数

マルチバックグラウンド法を使用して画像とグラデーションを混合する

結論

getdocs

使用する `background-color` と `background-image` 要素について

で画像をタイリング `background-repeat` 財産

で背景画像の配置を調整する `background-position`

を使用して背景画像のサイズを変更する `background-size` 財産

背景画像を `background-attachment` 財産

プロパティをに組み合わせる `background` 財産

を使用してグラデーションを作成する `linear-gradient` 関数