背景画像を複数指定する。

通常1つの要素に対して背景画像は1枚しか指定できませんが、
CSS3では複数画像を指定することができます。
例として下記の2枚の画像を使ってみます。


.bgimg {
background:url("sample1.jpg") no-repeat right bottom, url("umi.jpg");
width:400px;
height:300px;
color:#FFF;
}
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

上記コードのように、backgroundプロパティで、
カンマ「,」で区切ることで複数の画像をすることができます。
※なおIE8以下では対応していません、IE9からは対応しているようです。

3 Responses to “背景画像を複数指定する。”

  1. MIKIO より:

    こちらはIE9ですが、デモ画像が表示されません。

    • kimuray より:

      コメントありがとうございます。
      「デモ画像が表示されない」ということですが、
      IE9のブラウザモードが、IE9互換表示になっていないでしょうか?
      当環境で見た所、IE9換表示になっていると表示されていませんでした。

      • MIKIO より:

        IE9互換表示になっていました。
        表示できました。ありがとうございました。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る