如何增加和减少 HTML 亮度？答案

【问题标题】：How to increase and decrease HTML brightness?如何增加和减少 HTML 亮度？
【发布时间】：2020-02-27 02:44:26
【问题描述】：

我已经在 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>");

【问题讨论】：

标签： html slider brightness

【解决方案1】：

您可能需要使用不透明度选项。

例子：

div {
  opacity : 0.5;
}

【讨论】：