making background opague on hover with css, css3 or jquery

<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>

<div class="content">Content<a href="">Link</a></div>