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についているペイントで簡単に作成できる。
関連記事
-
-
上部に固定されたヘッダーメニューの作成
■やりたい事 ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...
-
-
cssのcontent
テキストが書かれているけど、firebugで要素を見ても 書かれていない。かとい ...
-
-
jQueryとCSSの連携
$(function(){ $("#change_small").click(f ...
-
-
ページング用CSS
div.pageNav { //これなくてもいいかも。 clear: both; ...
-
-
Flash上にHTMLの文字やリンクを重ねる方法
FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...
-
-
CSSでプロパティの初期化
CSSでmedia screen and等を指定し、特定の場合のみプロパティの無 ...
-
-
CSSでスタイルの優先
1つのファイルに対して複数スタイルが指定されている、 ということがたまにある。 ...
-
-
CSSでセンターリング
<center></center>でセンターリングが出来 ...
-
-
デザイン等のカラーの組み合わせを簡単に決める方法
サイト作成時にメインカラーとそれにマッチする組み合わせを考える必要があった。デザ ...
-
-
firebugでCSSパスをコピー
要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...