From f1650fbb27022456d9fc3ff8cd4b5ec676ca3a2e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 12 Nov 2021 01:05:16 +0900 Subject: CSS Backgrounds and Borders 背景関係のプロパティの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/background-image/index.md | 167 +++++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/ja/web/css/background-image/index.md (limited to 'files/ja/web/css/background-image/index.md') diff --git a/files/ja/web/css/background-image/index.md b/files/ja/web/css/background-image/index.md new file mode 100644 index 0000000000..9c2da47f92 --- /dev/null +++ b/files/ja/web/css/background-image/index.md @@ -0,0 +1,167 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - Background + - CSS + - CSS Background + - CSS Property + - CSS プロパティ + - CSS 背景と境界 + - Reference + - background-image + - 'recipe:css-property' + - リファレンス +translation_of: Web/CSS/background-image +--- +

{{CSSRef}}

+ +

background-image は CSS のプロパティで、要素に1つ以上の背景画像を設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-image.html")}}
+ + + +

画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

+ +

要素の境界は背景画像よりも上、 {{cssxref("background-color")}} は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 {{cssxref("background-clip")}} および {{cssxref("background-origin")}} プロパティによって定義されます。

+ +

指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を none 値であるかのように処理します。

+ +
注: たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。
+ +

構文

+ +

それぞれの背景画像は、キーワード none または {{cssxref("<image>")}} 値として指定されます。

+ +

複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。

+ +
background-image:
+  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url('https://mdn.mozillademos.org/files/7693/catfront.png');
+ +

値

+ +
+
none
+
画像を用いないことを表すキーワード。
+
<image>
+
表示する背景を指し示す {{cssxref("<image>")}}。複数の背景に対応している場合は、カンマ区切りで複数指定することができます。
+
+ +

アクセシビリティの考慮

+ +

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

背景画像の重ね合わせ

+ +

星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。

+ +

HTML

+ +
<div>
+  <p class="catsandstars">
+    This paragraph is full of cats<br />and stars.
+  </p>
+  <p>This paragraph is not.</p>
+  <p class="catsandstars">
+    Here are more cats for you.<br />Look at them!
+  </p>
+  <p>And no more.</p>
+</div>
+ +

CSS

+ +
p {
+  font-size: 1.5em;
+  color: #FE7F88;
+  background-image: none;
+  background-color: transparent;
+}
+
+div {
+  background-image:
+      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+.catsandstars {
+  background-image:
+      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+      url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Layering_background_images')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}{{Spec2('CSS3 Backgrounds')}}CSS2 Revision 1 と比べ、プロパティが複数の背景と任意の {{cssxref("<image>")}} CSS データ型をサポートするよう拡張されました。
{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.1')}}CSS1 と比べ、画像が固有の寸法を持たない場合、持つ場合の取り扱い方が明記されました。
{{SpecName('CSS1', '#background-image', 'background-image')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +
{{Compat("css.properties.background-image")}}
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf