[CSS] 複数のbackground-imageの設定方法
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
マルチBackground-imageを使ってみる
CSS3では、背景画像を指定する際に複数の画像を指定出来るようになりました。
従来のCSSでは、一枚までしか指定が出来なかったので、無駄にdivなどのボックスを重ねて表現していました。
指定方法
方法は、至って簡単です。
画像を,(カンマ)区切りで指定するだけで大丈夫です。
注意する点としては、先に指定している画像が上になるということです。
これを覚えておかないと、上手に重ねる事ができません。
実際のサンプルソースが下記になります。
#box01{ background-image:url(images/bg01.png), url(images/bg02.png), url(images/bg03.png); background-repeat:no-repeat, repeat-x, repeat-y; background-position:right top, 20px 0, right; width:200px; height:200px; }
画像の指定順と同様にrepeatとpositionも同じ順になります。
省略した場合、最初の指定が適用されます。
サンプルページを作ってみましたので、よかったら参考にしてみてください。
サンプルページ
bg01が黒丸、bg02が赤い四角、bg03が青い星となっています。
どの順番で重なっているか一目で分かると思います。
まとめ
CSSの複数background指定は、結構複雑なイメージがありますが、そんなことはありません。
ポイントさえ抑えておけば、とても有用なものです。
あまり深く考えずに、とりあえず使ってみるのが一番です。
ちなみに、対応ブラウザは、IE9〜とsafari、chrome、firefoxです。
IEだけは注意が必要です。
ad
関連記事
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
-
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
-
[Dreamweaver] テンプレートの入れ子
テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ
-
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
-
[WordPress] 自作プラグインの設定など
プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて
-
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると