Html rgba color opacity?

别等时光非礼了梦想. 提交于 2019-12-12 03:06:05

问题


When we use RGBA in Html we use sth like this.

<div style="Background: rgba (x, x, x, 0.dd)">Some Content</div>

How many decimals can you go in the dd(opacity). Is it browser dependent? Or are its limits specified in HTML standards?


回答1:


The specification says it is a <number> which is defined as:

zero or more digits followed by a dot (.) followed by one or more digits

So there is no limit specified in the CSS spec.

I'd be surprised if any human eye could distinguish beyond two decimal places though.




回答2:


The value can be any number between 0.0 and 1.0.

The resolution depends on the color space resolution which typically is 8-bit (future may offer higher resolutions such as 10- and 12-bit, although I doubt that will happen anytime soon, but that is why a fraction is used instead of a byte value).

The value is multiplied with the byte value so it is limited what numbers you want to use and the final value is rounded to closest integer value:

Internal byte value = round(alpha * 255);

(or an increment of 1 / 256 = 0.00390625)

to give you actual change of the final byte value and the visual appearance (assuming solid background).

I made a small script here which gives you the result from using various numbers of decimals in the fraction value - as you can see when you are at 3 decimals the values start to be similar and therefor not so useful.

ONLINE GENERATED TABLES HERE

The loop to generate the table looks like this in general:

for (; i < 1; i += 0.1) {
    num = Math.round(i * 255, 10);
    ...
}



回答3:


The opacity property has a value set to two decimals.

All current browsers recognize this, the context is a little different for IE8 and below.



来源:https://stackoverflow.com/questions/19409115/html-rgba-color-opacity

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!