CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3で複数の背景画像を追加する方法

CSS3では、background-imageプロパティを使うことで、1つの要素に複数の背景画像を簡単に追加できます。各背景画像はカンマ（,）で区切って指定し、表示順序は先に書いたものが前面に、後ろに書いたものが背面に配置されます。

さらに、background-positionやbackground-repeatなどの関連プロパティも、背景画像と同じ順番でカンマ区切りで指定することで、それぞれの画像に対して個別の設定が可能です。

サンプルコード

以下は、CSS3で複数の背景を追加する具体例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    background-image:
    url("https://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3613.png"),
    url("https://i.picsum.photos/id/256/1200/300.jpg");
    background-position: left bottom, left top;
    background-repeat: repeat, repeat;
    padding: 15px;
}
p {
    font-size: 18px;
}
</style>
</head>
<body>
<h1>Multiple Backgrounds using CSS</h1>
<div>
<h1>Some Sample Text</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ipsum
dolorem? Adipisci accusantium eveniet necessitatibus beatae est, dolorum
nobis minima aliquam atque id at sapiente culpa, alias nulla rem.
Aliquam, modi repellendus fugiat dolore, blanditiis praesentium quam
doloribus possimus doloremque reprehenderit corporis enim distinctio,
ducimus nisi. Voluptatum vel repudiandae omnis.
</p>
</div>
</body>
</html>

コードのポイント

  • background-image：紅葉の葉っぱの画像と風景写真の2つの画像をカンマで区切って指定しています。
  • background-position：「left bottom, left top」と指定することで、1つ目の画像を左下に、2つ目の画像を左上に配置しています。
  • background-repeat：両方の画像とも「repeat」を指定して、要素全体に繰り返し表示させています。

実行結果

上記のコードを実行すると、以下のような出力になります。左下には紅葉の葉のパターン、上部には風景画像が繰り返し表示され、テキストがその上に重ねて表示されます。

CSS3で複数の背景画像を追加する方法

まとめ

CSS3の複数背景機能を使えば、装飾画像やテクスチャなどを1つの要素に重ねて表現でき、これまで画像編集ソフトで合成していたようなデザインもCSSだけで実現できます。古いブラウザへの対応が必要な場合はフォールバック用の単一背景指定を併記しておくと安心です。

  1. CSS3の2D変換関数（transform）の使い方を徹底解説

    CSS3の2D変換（2D transforms）は、要素を移動（translate）・回転（rotate）・拡大縮小（scale）・傾斜（skew）させることで、見た目や配置を自由に変更できる強力な機能です。アニメーションやインタラクティブなデザインにも欠かせないテクニックとして広く使われています。 主な2D変換関数の一覧 以下に、よく使用される代表的な2D変換関数をまとめました。 番号関数と説明 1matrix(n,n,n,n,n,n)6つの値を使って行列（マトリックス）による変換を定義します。すべての変換を1つの関数で表現できます。 2translate(x,y)要素をX軸方向とY

  2. CSS3の3D変換関数の使い方を徹底解説！matrix3dやtranslate3dの基本

    CSS3の3D変換（3D Transform）を活用すると、要素をX軸・Y軸に加えてZ軸（奥行き）方向にも移動させることができます。2D変換では表現できない立体感のある演出が可能になり、モダンなWebデザインにおいて非常に強力な機能です。 CSS3で使える主な3D変換関数 3D変換を呼び出すために使用される主なメソッドは以下の通りです。 番号値と説明 1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)16個の値からなる行列を使用して、要素を変換します。 2translate3d(x,y,z)X軸・Y軸・Z軸の3つの値を使って、要素を移動します。 3t