勉強したことのメモ

webプログラマが勉強したことのメモ。

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

   

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>

 

■その他 

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

 - CSS

  関連記事

上部に固定されたヘッダーメニューの作成

■やりたい事 ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...

CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

CSSのセレクタを一瞬で拾ってくる

↓↓こちらのサイト様 http://css.miugle.info/ 左側のテキ ...

CSSでfloatの解除

CSSでfloatがかかっているところを解除したかったけど、 やり方が分からなか ...

特定のブラウザのみCSS指定

FireFoxだけどうにもデザインが崩れる、 ただ他のブラウザでは希望通りのデザ ...

Bootstrapを使用したデザインテンプレート

Bootstrapを使用してもデザインのセンス無いし、 と思っていいものはないか ...

可変要素内の文字を丸める

可変の要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidt ...

CSSでスタイルの優先

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

デザイン等のカラーの組み合わせを簡単に決める方法

サイト作成時にメインカラーとそれにマッチする組み合わせを考える必要があった。デザ ...

ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...