CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSの複数の背景


この章では、1つの要素に複数の背景画像を追加する方法を学習します。

また、次のプロパティについても学習します。

  • background-size
  • background-origin
  • background-clip

CSSの複数の背景

CSSを使用すると、プロパティを使用して、要素に複数の背景画像を追加できます background-image

さまざまな背景画像はコンマで区切られ、画像は互いに積み重ねられ、最初の画像が視聴者に最も近くなります。

次の例には2つの背景画像があります。最初の画像は花(下と右に配置)で、2番目の画像は紙の背景(左上隅に配置)です。

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

複数の背景画像は、個々の背景プロパティ(上記のように)またはbackground省略形プロパティのいずれかを使用して指定できます。

次の例では、background省略形のプロパティを使用しています(上記の例と同じ結果)。

#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}


CSSの背景サイズ

CSSbackground-sizeプロパティを使用すると、背景画像のサイズを指定できます。

サイズは、長さ、パーセンテージ、または2つのキーワード(containまたはcover)のいずれかを使用して指定できます。

次の例では、背景画像のサイズを元の画像よりもはるかに小さくします(ピクセルを使用)。

痛みを彼に感謝します

痛み自体は愛です

だからこそ、私たちの通常の慣行が結果を利用するために耐えるのは、ほんの少しでも来るのです

コードは次のとおりです。

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

のその他の2つの可能な値background-sizecontain 、およびcoverです。

containキーワードは、背景画像を可能な限り大きくするように拡大縮小します(ただし、幅と高さの両方がコンテンツ領域内に収まる必要があります)そのため、背景画像と背景測位領域の比率によっては、背景画像で覆われていない領域が存在する場合があります。

キーワードはcover、コンテンツ領域が背景画像で完全に覆われるように背景画像を拡大縮小します(幅と高さの両方がコンテンツ領域以上になります)。そのため、背景画像の一部が背景測位エリアに表示されない場合があります。

次の例は、containとの使用法を示していcoverます。

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

複数の背景画像のサイズを定義する

複数のbackground-size背景を操作する場合、プロパティは(コンマ区切りのリストを使用して)背景サイズの複数の値も受け入れます。

次の例では、3つの背景画像が指定されており、画像ごとに異なる背景サイズの値が設定されています。

#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

フルサイズの背景画像

次に、ブラウザウィンドウ全体を常にカバーする背景画像をWebサイトに表示します。

要件は次のとおりです。

  • ページ全体を画像で埋めます(空白なし)
  • 必要に応じて画像を拡大縮小する
  • ページの中央の画像
  • スクロールバーを発生させないでください

次の例は、その方法を示しています。<html>要素を使用します(<html>要素は常に少なくともブラウザウィンドウの高さです)。次に、固定された中央の背景を設定します。次に、background-sizeプロパティを使用してサイズを調整します。

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

ヒーロー画像

<div>でさまざまな背景プロパティを使用して、ヒーロー画像(テキスト付きの大きな画像)を作成し、必要な場所に配置することもできます。

.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}

CSS背景-起源プロパティ

CSSbackground-originプロパティは、背景画像の配置場所を指定します。

プロパティは3つの異なる値を取ります。

  • border-box-背景画像は境界線の左上隅から始まります
  • padding-box-(デフォルト)背景画像は、パディングエッジの左上隅から始まります
  • content-box-背景画像はコンテンツの左上隅から始まります

次の例は、background-originプロパティを示しています。

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

CSSのbackground-clipプロパティ

CSSbackground-clipプロパティは、背景のペイント領域を指定します。

プロパティは3つの異なる値を取ります。

  • border-box-(デフォルト)背景は境界線の外側の端にペイントされます
  • パディングボックス-背景はパディングの外側の端にペイントされます
  • content-box-背景はコンテンツボックス内にペイントされます

次の例は、background-clipプロパティを示しています。

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

エクササイズで自分をテストする

エクササイズ:

<body>要素に2つの背景画像を追加します。

img1.gifおよびimg2.gif

img2.gifの上に表示されていることを確認してくださいimg1.gif

<style>
body {
  background-image: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


CSSの高度な背景プロパティ

Property Description
background A shorthand property for setting all the background properties in one declaration
background-clip Specifies the painting area of the background
background-image Specifies one or more background images for an element
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)