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についているペイントで簡単に作成できる。
関連記事
-
-
特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法
特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、 ...
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて
ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...
-
-
レスポンシブ対応で右カラムのコンテンツを上に表示させる方法
レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...