Как сделать прямоугольники, заполненные определенным процентным содержанием синего, с помощью CSS или начальной загрузки 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

Затем просто примените нужную переменную к вашему прямоугольнику.