问题
I want to make a div with transparent background smoothly changing color, the problem is that I need to have some content at the div which will not be transparent.
I found this for changing the color
<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>
But I have no clue how to add the transparency into it.
The other thing I would like is to change the color by moving the with the cursor. I think it should be possible to combine it with the jQuery .mousemove() function.
Thanks a lot
回答1:
The format for semi-transparent colour is rgba( R, G, B, A), where R, G, B are what you already have, and A is a number between 0 (fully transparent) and 1 (fully opaque). It's up to you to determine what the exact number you need is.
回答2:
Change rgb to rgba.
rgba(red,green,blue,opacity)
回答3:
Use CSS for transition:
body{
-webkit-transition: background-color 1s linear;
}
Live code: http://jsbin.com/oqesub/1/edit
来源：https://stackoverflow.com/questions/15464873/how-to-apply-transparency-to-a-background-that-changes-color-smoothly