【CSS3】background-imageで複数の背景画像を表示する

CSS3ではbackground-imageで複数の背景画像を使用出来るようになった。

今回使用するのはこの4枚の背景画像を重ねてボタンをつくってみる。

background-imageなどのプロパティの引数に値を順番に指定する。
重なり順は一番左が一番上で、一番右が一番下になる。

p#button {
	background-image: url(画像4のパス), url(画像3), url(画像2), url(画像1);
	background-repeat: 画像4のリピート指定, 画像3, 画像2, 画像1;
	background-position: 画像4の位置指定, 画像3, 画像2, 画像1;
}

実際に使ってみる
【button.html】

<p id="button">ボタン</p>

【button.css】

p#button {
	width: 320px;
	height: 42px;
	line-height: 42px;
	text-indent: 2.2em;
	font-size: 140%;
	color: #FFFFFF;
	margin: 50px auto;
	background-image: url(img04.png), url(img03.png), url(img02.png), url(img01.png);
	background-repeat: no-repeat, no-repeat, repeat-x, no-repeat;
	background-position: 98% 50%, 2% 50%, left top, center center;
}

【実行結果】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>