在 html/php 中为输入 RGB 值在框中显示颜色
[英]Display the Color in a box for input RGB values in html/php
问题描述
The code given below will give the Hex value after submission, but i also require a square box and a corresponding color filled in the box.
下面给出的代码将在提交后给出 Hex 值，但我还需要一个方框，并在方框中填充相应的颜色。 want to get the red, green and blue value and want to display the color of that RGB value in a square box.想要获得红色、绿色和蓝色的值，并希望在方框中显示该 RGB 值的颜色。
<head> <style type="text/css"> #redv:focus { background-color: PowderBlue; } #bluev:focus { background-color: PowderBlue; } #greenv:focus { background-color: PowderBlue; } #button1:hover { background-color: CadetBlue; font-size: 16px; color: white; border: 2px solid #008CBA; } #button1 { background-color: #008CBA; font-size: 16px; color: white; } input[type="color"] { -webkit-appearance: none; border: none; width: 102px; height: 102px; } </style> </head>
<body> <form> Enter Red Value: <input type="number" id="redv" name="red" value="0" max="255"/> (Max:255)<br><br> Enter Green Value: <input type="number" id="greenv" name="green" value="0" max="255"/> (Max:255) <br><br> Enter Blue Value: <input type="number" id="bluev" name="blue" value="0" max="255"/>(Max:255) <br><br> <input type="submit" name="submit" value="Generate" id="button1"> </form> </body> <?php @$red=$_GET['red']; @$green=$_GET['green']; @$blue=$_GET['blue']; function rgb2hex($rgb) { $hex = "#"; $hex.= str_pad(dechex($rgb[0]), 2, "0", STR_PAD_LEFT); $hex.= str_pad(dechex($rgb[1]), 2, "0", STR_PAD_LEFT); $hex.= str_pad(dechex($rgb[2]), 2, "0", STR_PAD_LEFT); return $hex; // returns the hex value including the number sign (#) } $rgb = array( $red, $green, $blue ); $hex = rgb2hex($rgb); echo $hex; ?>
The objective is to get something like this, we will get input from user in Red, Green and Blue and will display that color in a square box as shown below.我们的目标是得到这样的东西，我们将从用户那里获得红色、绿色和蓝色的输入，并将该颜色显示在一个方形框中，如下所示。
1 个解决方案
解决方案1
1 已采纳 2021-04-25 20:15:30
Minimized the rgb2hex function and added a div with required style instead of input[type=color]最小化 rgb2hex function 并添加了一个具有所需style的div而不是input[type=color]
<?php
$color = sprintf("#%02x%02x%02x", $_GET['red'], $_GET['green'] , $_GET['blue']);
echo '<div style="width:102px; height:102px; background-color:'.$color.';"></div>';
?>
or或者
<style>
div{
width: 102px;
height: 102px;
border: none;
}
</style>
<?php
$color = sprintf("#%02x%02x%02x", $_GET['red'], $_GET['green'] , $_GET['blue']);
echo '<div style="background-color:'.$color.';"></div>';
?>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.