Question

所以我正在开发一个涉及输入类型颜色的项目。我需要使用这些来制作渐变，我该怎么做？

这是颜色标签

<div id="part1" align=center>
<input type="color" id = color>
<input type="color" id = color2>

编辑：香港专业教育学院只尝试过尝试

$("body").css("background-color",clr);

但据我所知，那不能做渐变

Answer 1

由于您提供的代码未完成：

变量clr是什么意思？
输入值何时会在后台生效？

在这里，我将提供一个示例代码，我尝试猜测你想要做什么

我的意思是我想改变背景：线性渐变（红色，蓝色），这样我就可以使用输入类型=＆＃34;颜色＆＃34;更改渐变的颜色

以下是使用按钮为渐变颜色指定背景的示例代码。希望这可以帮到你。

＆＃13;

$("#btn_color").on('click', function(){
	var color = $("#color").val();
  var color2 = $("#color2").val();
  var str = "linear-gradient(" + color + "," + color2 + ")";
  $("body").css("background",str);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
<div id="part1" align=center>
  <input type="color" id ='color'>
  <input type="color" id ='color2'>
</div>
<button id="btn_color">Click me </button>
</body>

</html>

＆＃13;

Answer 2

您需要在background属性

中放置所需渐变的值

查看此网址以获取更多信息https://www.w3schools.com/css/css3_gradients.asp

这里我举了一个实例：

function changeBackground(){
  const color1 = document.getElementById("color").value;
  const color2 = document.getElementById("color2").value;
  document.body.style.background = `linear-gradient(${color1}, ${color2})`;
}

html, body{
  height: 100%;
}

<div id="part1" align="center">
  <input type="color" id ="color">
  <input type="color" id ="color2">
  <button onClick="changeBackground()">Change background!</button>
</div>

使用JS / jQuery更改线性渐变

2 个答案: