SYNCERのロゴ
アイキャッチ画像

background-color - 背景色

background-colorは、要素の背景色を設定するプロパティです。背景色は、背景画像の後ろに描画されます。

概要

名前
background-color
<color>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <gray()> | <device-cmyk()> | <color-mod()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
rgb() = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? )
hsl() = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? )
hwb() = hwb( <hue> <percentage> <percentage> [ / <alpha-value> ]? )
gray() = gray( <number> [ / <alpha-value> ]? )
device-cmyk() = device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? , <color>? )
color-mod() = color( [ <color> | <hue> ] <color-adjuster>* )
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<cmyk-component> = <number> | <percentage>
<color-adjuster> =  [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] ) |  [red( | green( | blue( | alpha( | a(] '*' <percentage> ) |  rgb( ['+' | '-'] [<number> | <percentage>]{3} ) |  rgb( ['+' | '-'] <hash-token> ) |  rgb( '*' <percentage> ) |  [hue( | h(] ['+' | '-' | '*']? <angle> ) |  [saturation( | s(] ['+' | '-' | '*']? <percentage> ) |  [lightness( | l(] ['+' | '-' | '*']? <percentage> ) |  [whiteness( | w(] ['+' | '-' | '*']? <percentage> ) |  [blackness( | b(] ['+' | '-' | '*']? <percentage> ) |  tint( <percentage> ) |  shade( <percentage> ) |  blend( <color> <percentage> [rgb | hsl | hwb]? ) |  blenda( <color> <percentage> [rgb | hsl | hwb]? ) |  contrast( <percentage>? )
初期値
transparent
適用対象
全ての要素。
継承
しない。
パーセンテージ
N/A
メディア
visual
計算値
the computed color
アニメーションの可否
as color
仕様書
https://drafts.csswg.org/css-backgrounds-3/#background-color

チュートリアル

色は様々な方法で指定できます。下記は同じ色を異なる方法で表現しています。

/* hex */
background-color: #A52A2A ;

/* rgb */
background-color: rgb( 165, 42, 42 ) ;

/* rgba (透過) */
background-color: rgba( 165, 42, 42, 0.5 ) ;

/* keyword */
background-color: brown ;

/* hsl */
background-color: hsl( 0, 59%, 40% ) ;
<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
div {
/*
	background-color: #A52A2A ;
	background-color: rgb( 165, 42, 42 ) ;
	background-color: hsl( 0, 59%, 40% ) ;
*/
	background-color: brown ;
	width: 200px ;
	height: 200px ;
}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

背景色は背景画像の後ろに描画されます。なので、透過部分がある背景画像と組み合わせることができます。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
div {
	background-image: url( ./image.png ) ;
	background-color: brown ;
	width: 200px ;
	height: 200px ;
}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

このプロパティは、アニメーションが有効です。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
div {
	animation: 5s infinite alternate syncer ;
	width: 200px ;
	height: 200px ;
}

@keyframes syncer {
	from {
		background-color: red ;
	}
	to {
		background-color: blue ;
	}
}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月24日 (日)
コンテンツを公開しました。