gpt4 book ai didi

css - 浏览器如何处理 rgb(percentage);对于奇怪的数字

转载 作者:技术小花猫 更新时间:2023-10-29 11:13:10 25 4
gpt4 key购买 nike

这与CSS颜色代码有关:

对于十六进制,我们可以表示从#000000 到#FFFFFF 的 16,777,216 种颜色

根据 W3C 规范,有效 RGB 百分比在(0.0% 到 100.0%)范围内,基本上可以为您提供 1,003,003,001 种颜色组合。 (1001^3)

根据规范:

Values outside the device gamut should be clipped or mapped into the gamut when the gamut is known: the red, green, and blue values must be changed to fall within the range supported by the device. Users agents may perform higher quality mapping of colors from one gamut to another. For a typical CRT monitor, whose device gamut is the same as sRGB, the four rules below are equivalent:

我怀疑浏览器是否真的可以呈现所有这些值。 (但如果他们这样做,请告诉我并忽略这篇文章的其余部分)

我假设有一些从 rgb(百分比)到十六进制的映射。 (但我还是不太确定这是如何工作的)

理想情况下,我想找出函数 rgb(percentage)->HEX

如果我不得不猜测它可能是这 3 个中的一个。

1) 四舍五入到最接近的十六进制

2) CEIL 到最近的 HEX

3) FLOOR 到最近的 HEX

问题是我需要在 map 上准确,但我不知道去哪里搜索。我的眼睛无法在那个级别区分颜色,但也许有一些聪明的方法来测试这 3 种中的每一种。

它也可能依赖于浏览器。这可以测试吗?

编辑:

Firefox seems to round from empirical testing.

编辑:

我正在查看 Firefox 的源代码,

nsColor.h
// A color is a 32 bit unsigned integer with four components: R, G, B
// and A.
typedef PRUint32 nscolor;

对于每个 R、G 和 B,Fiefox 似乎只有 255 个值的空间。暗示舍入可能是答案,但也许正在对 alpha channel 进行一些处理。

最佳答案

我想我无论如何都找到了 Firefox 的解决方案,我想你可能会喜欢跟进:

查看源代码我发现了一个文件:

nsCSSParser.cpp

对于每个 rgb 百分比,它执行以下操作:

  1. 将百分比分量乘以 255.0f
  2. 将其存储在 float 中
  3. 将其传递给 NSToIntRound 函数
  4. NSToIntRound 的结果存储在一个 8 位整数数据类型中, 在与其他 2 个组件和 alpha 组合之前 channel

寻找关于 NSToIntRound 的更多细节:

nsCoord.h
inline PRInt32 NSToIntRound(float aValue)
{
return NS_lroundf(aValue);
}

NSToIntRound 是 NS_lroundf 的包装函数

nsMathUtils.h
inline NS_HIDDEN_(PRInt32) NS_lroundf(float x)
{
return x >= 0.0f ? PRInt32(x + 0.5f) : PRInt32(x - 0.5f);
}

这个函数其实很聪明,花了我一段时间才破译(我真的没有很好的 C++ 背景)。

假设x为正

它将 0.5f 与 x 相加,然后转换为整数

如果x的小数部分小于0.5,加上0.5不会改变整数,小数部分被截断,

否则整数值会增加 1 并截断小数部分。

  1. 因此每个成分的百分比首先乘以 255.0f
  2. 然后四舍五入并转换为 32 位整数
  3. 然后再次转换为 8 位整数

我同意你们中的大多数人所说的这似乎是一个浏览器相关的问题,所以我将对其他浏览器做一些进一步的研究。

非常感谢!

关于css - 浏览器如何处理 rgb(percentage);对于奇怪的数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7759272/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com