CSS3の基本 - レベルアップCSS

複数の背景画像を重ねる

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
背景画像を指定するbackground-imageプロパティでは、CSS3から複数の背景画像を重ねて表示することができるようになりました。ここでは、その指定方法について紹介します。
講師:
03:47

字幕

背景画像を指定する background-imageプロパティでは複数の背景画像を重ねて表示することができるようになりました。このレッスンではその指定方法について紹介します。画面には左側に HTML と CSS の編集画面。右側にその結果を表示するウェブブラウザを表示しています。現在ウェブページでは背景に1枚の大きな写真を背景画像として表示しています。CSS の指定を見ると color プロパティで文字色に白background-image プロパティで背景画像にphoto.jpg が指定されています。photo.jpg がこの大きな1枚の写真です。ダウンロードしてきたサンプルファイルを開いてみましょう。photo.jpg を開きます。これが現在適用されている背景画像です。この背景画像に対してさらに上に1枚画像を重ねてみましょう。同じような画像を重ねてしまうと単に画像が重なって表示され上にある画像だけが見えてしまうので背景が透けた画像を重ねてみます。ここではサンプルファイルに含まれるbg_line.png というファイルを重ねてみましょう。一旦ファイルを開いてみます。bg_line.png はこのように非常に薄い紫で斜めにラインが入った画像です。 それでは index ファイルに戻ります。先ほど開いた bg_line.png を photo.jpg に重ねてみましょう。複数の背景画像を重ねて表示するためにはurl 関数で指定した値をカンマ区切りで指定します。またカンマ区切りで指定した値は先頭に書いた値ほど上に表示されますのでここでは上に表示したい bg_line.png の指定を photo.jpg よりも前に書きます。bg_line.png を指定します。そしてこれをカンマ区切りで指定すると元々あった写真の背景画像に対してさらにその上に薄い紫の斜めにラインが入ったテクスチャ画像が重ねて表示されました。これだけを見れば2枚の画像を1枚に統合してその1枚の画像を指定すればいいようにも思えますがこのように複数の画像に分けることで別のウェブページではphoto.jpg を別の画像に差し替えるといったことができます。例えばサンプルファイルの中に含まれるphoto2.jpg というファイルに写真だけ差し換えてみましょう。先に photo2.jpg がどのような写真なのかファイルを開いてみます。photo2.jpg はこのような道端の風景写真です。 それでは index.html に戻り photo.jpg をphoto2.jpg に変えてみましょう。写真のファイル名を変更します。するとウェブブラウザを見るとテクスチャ画像はそのままに背景の写真だけが差し変わりました。このレッスンでは背景画像を指定すbackground-image プロパティで複数の背景画像を重ねて表示する方法について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。