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についているペイントで簡単に作成できる。
関連記事
レスポンシブ対応で右カラムのコンテンツを上に表示させる方法
レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...
スマホサイトでviewportを指定しても横スクロールバーが表示される
スマホ用のサイトでviewportが指定されており、widthも100%になって ...
jQueryのCSS変更
jQueryでCSSを触る際、 $("#aaa").css('height',' ...
CSSフレームワークであるTailwind CSSの特徴とBootstrapとの違いについて
あるサイトをWappalyzerで調査していた際にUIフレームワークがTailw ...
HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...