Как увеличить и уменьшить яркость HTML? - PullRequest
Новая
       22

Как увеличить и уменьшить яркость HTML?

0 голосов
/ 27 февраля 2020

Я собрал некоторый код в HTML и у меня есть палитра цветов, которая отлично работает. Я также вставил некоторый код и создал ползунок, чтобы попытаться контролировать яркость выбранного цвета. Проблема в том, что когда я выбираю цвет, ползунок не меняет яркость выбранного цвета. Как связать значение ползунка с яркостью цвета? Я поставлю свой код для ползунка и палитры цветов ниже. Пожалуйста, дайте мне знать, если кто-нибудь может помочь. Спасибо -Остин 

        client.println("<!DOCTYPE html><html>");
        client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
        client.println("<link rel=\"icon\" href=\"data:,\">");
        client.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">");
        client.println("<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>");
        client.println("</head><body>");

        client.println("<form>");
        client.println("<hr>");         
        client.println("<section class=intensity>");
        client.println("<label for=intensity>Light Brightness");
        client.println("<br>");
        client.println("<span>Dim</span>");
        client.println("<input id=intensity type=range name=Dim min=0 max=255 step=1>");
        client.println("<span>Bright</span>");
        client.println("</section>");
        client.println("</form>");

        client.println("<div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1></div>");
        client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> ");
        client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>");
        client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);");
        //client.println("<script>function update(intensity)");
        client.println("document.getElementById(\"change_color\").href=\"?r\" + Math.round(picker.rgb[0]) + \"g\" +  Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + intensity + \"&\";}</script></body></html>");

1 Ответ

0 голосов
/ 27 февраля 2020

Возможно, вам понадобится опция opacity.

Пример: 

div {
  opacity : 0.5;
}
...