如何将透明度应用于平滑更改颜色的背景答案

【问题标题】：How to apply transparency to a background that changes color smoothly如何将透明度应用于平滑更改颜色的背景
【发布时间】：2013-03-17 18:58:25
【问题描述】：

我想制作一个透明背景的 div 平滑地改变颜色，问题是我需要在 div 上有一些不透明的内容。

我发现这个是为了改变颜色

<head>
<script 
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
setInterval ( "spectrum()", 1000 );
   }); 

function spectrum(){
var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 
   (Math.floor(Math.random() * 256)) + ',' + 
   (Math.floor(Math.random() * 256)) + ')';
$('body').css( { backgroundColor: hue });

}

</script>
</head>
</body>
</html>

但我不知道如何添加透明度。

我想要的另一件事是通过移动光标来更改颜色。我认为应该可以将它与 jQuery .mousemove() 函数结合起来。

非常感谢

【问题讨论】：

标签： javascript background transparency mousemove

【解决方案1】：

半透明颜色的格式是rgba( R, G, B, A)，其中R、G、B 是你已经拥有的，A 是介于 0（完全透明）和 1（完全透明）之间的数字不透明）。由您决定您需要的确切数字是多少。

【讨论】：

谢谢它运行良好，你知道如何使用鼠标坐标改变颜色吗？我看过一次，我认为至少有两个来自 rgb 的数字应该可以更改为窗口光标位置的 X 和 Y。

【解决方案2】：

将rgb 更改为rgba。

rgba(red,green,blue,opacity)

【讨论】：

【解决方案3】：

使用 CSS 进行过渡：

body{
  -webkit-transition: background-color 1s linear;
}

实时代码： http://jsbin.com/oqesub/1/edit

【讨论】：