CSS3不透明度的最大精度是多少？ [英] What is the maximum precision of CSS3 opacity?

问题描述

所以我一直在生成用于交互淡化的不透明度。

但是，我认为使用未取整的值来实现不透明度不是一个好主意。如果最大精度低于最大javascript精度，则浏览器似乎会舍入该值，但认为它已更改。

所以问题是，最大精度是多少对CSS3 opacity 有意义吗？

解决方案

不透明度基本上允许您想要的小数位数，但是问题在于HTML只能以256种不同的方式更改其亮度。因此，最敏感的不透明度将是黑色而不是白色，而可见光将具有256种不同的色相。这是因为R，G和B之间的比率必须始终保持相同才能保持相同的颜色。

因此，由于最敏感的颜色具有256个不同的值，对可见输出有影响的最小变化是 1/256 = 0.00390625 。从理论上讲，这应该是增加不透明度的最小步长。

我已经对此进行了测试，并使用一个简单的颜色选择器在此示例小提琴，底部div是唯一一个颜色发生变化的区域。前2个div的颜色为＃000000 ，下两个div的颜色为＃010101 。因此，基于此，我想说：

1. 输入的值不四舍五入，或者如果是四舍五入，则始终四舍五入向下（地板功能）


2. 不透明度的最大敏感性是3个小数位。
   
   

   So I've been just generating opacity for interactive fading.

   I think however, that it's not a good idea to use unrounded values for opacity. If the maximum precision is lower than maximum javascript in precision, the browsers seem to round the value, but consider it changed.

   So the question is, what is the maximum precision that makes sense for CSS3 opacity?

   解决方案

   Opacity allows for basically any number of decimals you'd like, but the issue is that HTML can only ever change its lightness in 256 different ways. So, the most sensitive opacity would be in something black over something white, which would have a visible variety of 256 different hues. This is because the ratio between R, G, and B must always stay the same to maintain the same colour.

   So, since the most sensitive colour has 256 different values, the smallest change that would have an effect on the visible output would be 1/256 = 0.00390625. In theory, that should be the minimum step size for increasing your opacity.

   I've tested this, and using a simple colour picker I noticed that in this example fiddle, the bottom div was the only one which had any change of colour. The top 2 divs had the colour #000000, and the bottom div had the colour #010101. So, I would say, based on this, that:

   1. The entered values are not rounded, or if they are, they are always rounded down (floor function)
   2. The maximum sensitivity for opacity is 3 decimals.

   It should be noted that this was all tested in Google Chrome, and like BoltClock said, this might vary per implementation.

   这篇关于CSS3不透明度的最大精度是多少？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！