CSS 媒体功能 - color-gamut

CSS 媒体功能 color-gamut 用于检测设备显示器能够再现的颜色范围。

Color-Gamut 可帮助 Web 开发人员创建针对用户设备的色域进行优化的样式和布局。

可能的值

srgb − 此值面向可以显示标准sRGB色域的设备，该色域是大多数消费类显示器中使用的标准颜色空间。sRGB代表的颜色范围有限，在许多设备上都很常见。
p3 − 此值表示设备可以显示的颜色至少与显示器 P3 颜色空间一样多，甚至可能更多。Display P3 色彩空间比 sRGB 色域更广，可以显示更多颜色。它常见于一些现代 iPhone 和高质量显示器等设备中。
rec2020 − 该设备至少可以显示与ITU-R BT.2020建议书色彩空间一样多的颜色，该建议书的颜色范围比P3色域更广。它通常与高端显示器和媒体制作相关联。

语法


color-gamut: srgba|p3|rec2020;

CSS color-gamut - srgb 值

以下示例演示了如何在 CSS 中使用 color-gamut： srgb 媒体功能来定位具有 srgb 色域的设备。当色域为 srgb 时，文本将为红色，背景颜色将变为黄色 -


<html>
<head>
<style>
	 	p {
	 	 	 background-color: pink;
	 	 	 color: black;
	 	}
	 	@media (color-gamut: srgb) {
	 	 	 p {
	 	 	 	 	background-color: yellow;
	 	 	 	 	color: red;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<p>CSS Media Feature color-gamut: srgb</p>
</body>
</html>

CSS color-gamut - p3 值

以下示例演示了 color-gamut： p3 媒体功能时，p 元素将默认具有粉红色背景色和黑色文本颜色。

支持 p3 色域的设备，p 元素的背景颜色将变为带有紫色边框的绿色。


<html>
<head>
<style>
	 	p {
	 	 	 background-color: pink;
	 	 	 color: black;
	 	}
	 	@media (color-gamut: p3) {
	 	 	 p {
	 	 	 	 	background-color: green;
	 	 	 	 	border: 3px solid violet;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<p>CSS Media Feature color-gamut: p3</p>
</body>
</html>

CSS color-gamut - rec2020 值

以下示例演示了 color-gamut： rec2020 媒体功能中，p 元素将默认具有粉红色背景色和黑色文本颜色。

支持 rec2020 色域的设备，p 元素的背景颜色将变为紫色，并带有蓝色文本。


<html>
<head>
<style>
	 	p {
	 	 	 background-color: pink;
	 	 	 color: black;
	 	}
	 	@media (color-gamut: rec2020) {
	 	 	 p {
	 	 	 	 	background-color: violet;
	 	 	 	 	color: blue;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<p>CSS Media Feature color-gamut: rec2020</p>
</body>
</html>

打印本页