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についているペイントで簡単に作成できる。
関連記事
-
-
SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて
ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...
-
-
画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法
Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...
-
-
CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法
他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分に ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法
可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_st ...