CSSで一つの要素に対して複数の背景色を指定する方法

2015/03/12

divの要素に対して複数の背景色をつけたかった。background-colorとかでなんとかなるのかな、と思ったけど無理らしい。background-colorとbackground-imageを使う以下の方法でいけた。

■サンプル

http://sample.taitan916.info/background-image/

■ソース

<html>
<head>
<style>
div.divarea{
	height: 400px;
	width: 400px;
	border: solid 3px #000;
	background-color: #02d101;
	background-image: url(./h200.jpg);
	background-position: left bottom;
	background-repeat: repeat-x;
	margin-bottom: 10px;
}

div.divarea2{
	height: 400px;
	width: 400px;
	border: solid 3px #000;
	background-color: #02d101;
	background-image: url(./w200.jpg);
	background-position: right top;
	background-repeat: repeat-y;
}
</style>
</head>
<body>

	<div class="divarea">上下で分けるパターン</div>
	<div class="divarea2">左右で分けるパターン</div>

</body>
</html>

<html>

<head>

<style>

div.divarea{

height: 400px;

width: 400px;

border: solid 3px #000;

background-color: #02d101;

background-image: url(./h200.jpg);

background-position: left bottom;

background-repeat: repeat-x;

margin-bottom: 10px;

}

div.divarea2{

height: 400px;

width: 400px;

border: solid 3px #000;

background-color: #02d101;

background-image: url(./w200.jpg);

background-position: right top;

background-repeat: repeat-y;

}

</style>

</head>

<body>

<div class="divarea">上下で分けるパターン</div>

<div class="divarea2">左右で分けるパターン</div>

</body>

</html>

■その他

緑の背景色をbackground-colorで指定して、その上にbackground-imageで敷き詰めるみたい。画像に関してはWindowsについているペイントで簡単に作成できる。

- CSS

: jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...

: CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。リンク時に一律させた方がよいと ...

: firebugでCSSパスをコピー

要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...

: CSSのopacity

opacityというプロパティを業務中に見かけたのでメモ。透明度を指定するもの ...

: LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

: ページ内リンク(アンカーリンク)がずれる場合の対処法

ヘッダーに固定メニューを設置しており、コンテンツ部分でアンカーリンクを使うと固定 ...

: CSSでスタイルの優先

1つのファイルに対して複数スタイルが指定されている、ということがたまにある。 ...

: フォームCSS

body { font-family : 'メイリオ',Meiryo,'ＭＳＰ ...

: CSSで1つの要素に複数classを設定して画像を入れ替える

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...

: スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

PREV: WordPressで固定ページに記事一覧を表示させるプラグイン
NEXT: マウスオーバーでの画像切り替えをJavaScriptで簡単に対応

CSSで一つの要素に対して複数の背景色を指定する方法

関連記事