背景色のCSS指定
サンプル1
背景色の指定 background-colorで指定
cssコード
#bgc-sample01 { background-color: #87F5DF; }
背景色のCSS指定
サンプル2
背景色の指定(+透明度指定) background-colorで指定
cssコード
#bgc-sample02 { background-color: #87F5DF82; }
背景色のCSS指定
サンプル3
背景色【単色】の指定(カラーネームで指定) background-colorで指定
cssコード
#bgc-sample03 { background-color: skyblue; }
背景色のCSS指定
サンプル4
背景色の指定 グラデーション【2色指定】 background-image で指定
グラデーションはbackground-colorではなく、background-imageで指定する。
cssコード
#bgc-sample04 { background-image: linear-gradient(blue, aqua); }
背景色のCSS指定
サンプル5
背景色の指定 グラデーション【2色指定 + 角度を 45 度に】
角度は正数の時は右回り、負数の場合は左回りに指定される。
cssコード
#bgc-sample05 { background: linear-gradient(45deg,aqua,blue); }
背景色のCSS指定
サンプル6
背景色の指定 グラデーション【2色指定 + 角度を -45 度に】
cssコード
#bgc-sample06 { background: linear-gradient(-45deg,aqua,blue); }
背景色のCSS指定
サンプル7
背景色の指定 グラデーション【2色指定 + グラデーションの終点を left に指定】
cssコード
#bgc-sample07 { background: linear-gradient(to left,aqua,blue); }
背景色のCSS指定
サンプル8
背景色の指定 グラデーション【2色指定 + グラデーションの終点を top に指定】
cssコード
#bgc-sample08 { background: linear-gradient(to top,aqua,blue); }
背景色のCSS指定
サンプル9
背景色の指定 グラデーション【2色指定 + グラデーションの終点を right に指定】
cssコード
#bgc-sample09 { background: linear-gradient(to right,aqua,blue); }
背景色のCSS指定
サンプル10
背景色の指定 グラデーション【2色指定 + グラデーションの終点を bottom に指定】
cssコード
#bgc-sample10 { background: linear-gradient(to bottom,aqua,blue); }
背景色のCSS指定
サンプル11
背景色の指定 グラデーション【2色指定 + グラデーションの終点を top right に指定】
cssコード
#bgc-sample11 { background: linear-gradient(to top right,aqua,blue); }
背景色のCSS指定
サンプル12
背景色の指定 グラデーション【2色指定 + グラデーションの終点を top left に指定】
cssコード
#bgc-sample12 { background: linear-gradient(to top left,aqua,blue); }
背景色のCSS指定
サンプル13
背景色の指定 グラデーション【2色指定 + グラデーションの終点を bottom right に指定】
cssコード
#bgc-sample13 { background: linear-gradient(to bottom right,aqua,blue); }
背景色のCSS指定
サンプル14
背景色の指定 グラデーション【2色指定 + グラデーションの終点を bottom left に指定】
cssコード
#bgc-sample14 { background: linear-gradient(to bottom left,aqua,blue); }
背景色のCSS指定
サンプル15
背景色の指定 グラデーション【カラーストップの指定】
グラデーション開始から20%の位置にpurple、80%の位置にaquaを指定
cssコード
#bgc-sample15 { background: linear-gradient( 0deg, blue, mediumblue 20%, aqua 80%,lightcyan ); }
背景色のCSS指定
サンプル16
背景色の指定 グラデーション【カラーストップの指定 + 角度指定】
グラデーション開始から70%の位置に lightblue 、70%の位置に darkblue を指定。角度を270度
cssコード
#bgc-sample16 { background: linear-gradient( 20deg,lightblue 70%,darkblue 70%); }
背景色のCSS指定
サンプル17
背景色の指定 グラデーション【カラーストップの指定 + グラデーションの終点指定】
グラデーションの終点を top に指定 + グラデーション開始から70%の位置に lightblue 、70%の位置に darkblue を指定
cssコード
#bgc-sample17 { background: linear-gradient(to top,lightblue 70%,darkblue 70%); }