知っておくと便利なcssの小技 part12 -複数の背景要素-

  • このエントリーをはてなブックマークに追加

今回は個人的に知っておくと便利だなと思うcssの小技part12 -複数の背景要素-です。


バックナンバー



cssで複数の背景画像・背景色を指定する

thu01
1箇所の背景に複数の画像や色を指定したいという事があるかと思います。そんな時に使える方法です。
グラデーションもあるので複雑なように見えるかもしれませんが、案外簡単です。

DEMO

HTML


css



とりあえず通常通りbackgroundで指定をしていきます。
あとはカンマで区切って要素を指定していくだけです。
慣れないうちだとどれが一番上になるかぴんと来ないかもしれませんが、純粋に1番最初に書いたものが1番上という形になります。
どんどん下に書いていくと下に重なっていくようなイメージです。


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">





株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。