Question

我想制作一个透明背景平滑变色的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()函数结合起来。

非常感谢

Answer 1

使用CSS进行转换：

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

直播代码： http://jsbin.com/oqesub/1/edit

Answer 2

将rgb更改为rgba。

rgba(red,green,blue,opacity)

Answer 3

半透明颜色的格式为rgba( R, G, B, A)，其中R，G，B是您已有的，A是一个数字介于0（完全透明）和1（完全不透明）之间。您需要确定所需的确切数字。

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

3 个答案: