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についているペイントで簡単に作成できる。
関連記事
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...
-
-
CSSフレームワークであるTailwind CSSの特徴とBootstrapとの違いについて
あるサイトをWappalyzerで調査していた際にUIフレームワークがTailw ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法
Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...