如何使用CSS或Bootstrap 3使矩形填充特定百分比的蓝色？

Question

我在笔记本电脑上有一张完全符合我的意思的图像，但我不知道该如何显示给您。 简要地说，我想制作一个填充特定百分比的蓝色的矩形，所以能帮我吗？

Answer 1

假设您已经有了一个蓝色值，并且可以在css中制作一个矩形，则可以使用hsla(colour, saturation, lightness, opacity)更改亮度，饱和度和不透明度百分比。

要获得我认为想要的“百分比”，您必须更改饱和度百分比。例如，要使蓝色240完全饱和，可以执行hsla(240, 100%, 50%, 1)。对于50％的蓝色，您可以进行hsla(240, 50%, 50%, 1)，对于25％的蓝色，您可以进行hsla(240, 25%, 50%, 1)，依此类推。

要更好地了解hsla的工作原理并找到蓝色“百分比”的含义，请在此处查看hsla颜色选择器：

http://hslpicker.com/#00f

然后只需将所需的变量应用于矩形。