CSSで一つの要素に対して複数の背景色を指定する方法
2024/01/13
1つのdiv要素に対して複数の背景色をつけたかった。background-colorとかでなんとかなるのかな、と思ったけど無理らしい。background-colorとbackground-imageを使う以下の方法でいけた。
サンプル
https://taitan916.info/sample/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のopacity
opacityというプロパティを業務中に見かけたのでメモ。 透明度を指定するもの ...
スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...
Flash上にHTMLのテキストやリンク(aタグ)を重ねる方法
FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法
可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_st ...