PHP：使用十进制值添加div背景颜色（1 =黑色，0 =白色）

Question

So in my gaming system after I query the players database, I get a value between from 0 to 1. 0 should represent white and 1 should represent black. 0.01 to 0.99 represents the shades from white to black.

I use the gaming data to show the players profile details on a webpage.

How can I dynamically create a logic to generate the color code based on this decimal value? I need to make the background color of the div of each player a shade of grey as represented by the player's orientation number (0 to 1)

I tried to add background-color:black to the div and then reduce opacity to simulate change in shade. Unfortunately this also makes the content inside the div transparent too. I tried adding opacity:1 to inside div but it did not work.

So I think finding a way to convert the decimal value to a hex value between black and white must be the way.

Any insight is greatly appreciated!

Answer 1

The colors are expressed in RGB (Red, Green, Blue) with each value ranging between 0 and 255, so simply multiply your value by 255 for each color component and then set your div's background color like this:

<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>

</div>