How to apply transparency to a background that cha

2019-09-16 03:04发布

问题:

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