making background opague on hover with css, css3 or jquery

<!DOCTYPE html>
<html>
<head>
<title>making background opague on hover with css, css3 or jquery</title>
  <style type="text/css">
   .background {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: -1;
       background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA0SURBVBhXY/wPBA6eZxnQwYHtxgyM9h5n/oMkQBwYgClmQpdA5oMlcQHCkugOgvEZ8bkWAHInGVYp48cTAAAAAElFTkSuQmCC);
       /* These three lines are for transparency in all browsers. */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
       filter: alpha(opacity=50);
       opacity:.5;
   }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
    $('a').hover(function(){
        $('.background').css('opacity',0.2);
    }, function(){
        $('.background').css('opacity','');
    });
    });
 </script>
</head>
<body>
<div class="content">Content<a href="">Link</a></div>
<div class="background"></div>
</body>
</html>