css - 如何使用 css 或 bootstrap 3 制作填充特定百分比蓝色的矩形？
问题描述
我的笔记本电脑上有一张图片，这正是我的意思，但我不知道如何向您展示。简而言之，我想制作一个填充特定百分比蓝色的矩形，请问您能帮帮我吗？
解决方案
假设您已经为蓝色设置了一个值，并且可以在 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 颜色选择器：
然后只需将所需的变量应用于您的矩形。