【问题标题】:PHP: Add div background color using decimal value (1= black and 0 = white)PHP:使用十进制值添加 div 背景颜色(1 = 黑色,0 = 白色)
【发布时间】:2016-01-30 00:37:16
【问题描述】:

所以在我的游戏系统中查询玩家数据库后,我得到一个介于 0 到 1 之间的值。0 应该代表白色,1 应该代表黑色。 0.01 到 0.99 代表从白色到黑色的色调。

我使用游戏数据在网页上显示玩家资料详情。

如何动态创建一个逻辑来根据这个十进制值生成颜色代码?我需要将每个玩家的 div 的背景颜色设置为灰色阴影,由玩家的方向编号(0 到 1)表示

我尝试将background-color:black 添加到 div 中,然后降低不透明度以模拟阴影的变化。不幸的是,这也使 div 内的内容也变得透明。我尝试将 opacity:1 添加到内部 div 但它不起作用。

所以我认为找到一种将十进制值转换为黑白之间的十六进制值的方法一定是方法。

非常感谢任何见解!

【问题讨论】:

    标签: javascript php html css


    【解决方案1】:

    如果您只想使用 PHP(如果 0 和 1 之间的结果来自 PHP 或数据库则更好)我认为这可能是个好方法:

    <?php
    $res = 0.4; //that you have to put you result between 0 and 1
    $rgb= intval($res*255);
    $color = "rgb(".$rgb.", ".$rgb.", ".$rgb.")"; // the result of the code... for example "rgb(2, 2, 2)"
    ?>
    

    那么你只需要在你的 div 样式上呼应颜色。

    【讨论】:

      【解决方案2】:

      Racil 的想法是正确的,但颜色构造不当。您可以这样做的一种方法是按照他的建议计算颜色分量:

      var color_component = 255 * (1 - value);
      

      您可以使用它来生成类似这样的颜色:

      var color = 'rgb(' + value + ', ' + value + ', ' + value + ')';
      

      或者,如果您想更加狡猾,可以通过将颜色分量转换为十六进制来将其转换为十六进制颜色,如下所示:

      var hex = new Number(color).toString(16);
      var color = '#' + hex + hex + hex + ';';
      

      【讨论】:

        【解决方案3】:

        颜色以 RGB(红、绿、蓝)表示,每个值的范围在 0 到 255 之间,因此只需将每个颜色分量的值乘以 255,然后像这样设置 div 的背景颜色:

        <div id="myDiv">This is a color test</div>
        
        <script>
          var value = 0.1;
          var color_component = Math.ceil(255 * (1 - value));
          var color = "rgb(" + color_component + "," + color_component + "," + color_component + ")";
          document.getElementById("myDiv").style.backgroundColor = color;
        </script>

        【讨论】:

        • 他需要做var color_comonent = 255 * (1 - value)。不这样做会使接近零的值更暗,而值更接近一亮,因为 255 是可能的最亮值。这样,您的值就会被反转。
        • 另外,这不会给他一个有效的十六进制颜色。它可能会给他一些类似 #255255255 的信息,但这是无效的。
        • @Pavlin 感谢您的注释,已修复。
        猜你喜欢
        • 2010-11-22
        • 1970-01-01
        • 2013-07-14
        • 1970-01-01
        • 2021-12-03
        • 1970-01-01
        • 2019-07-20
        • 2019-12-13
        • 1970-01-01
        相关资源
        最近更新 更多