CSS颜色透明渐变

如图

<html>
<head>
    <style type="text/css" >
        #TopBackGround
        {
            width:200px;
            height:300px;
            margin:0 100px 0 0 ;
            background-image:url(background_img.png);
            position:relative;
            z-index:-1;
        }
        
        #backgroundbg2
        {
            position:absolute;
            top:0;
            background: -webkit-gradient(linear,center top,center bottom,from(rgba(255, 255, 255, 0.1)),to(rgba(255, 163, 204, 0.5)));
            z-index:-1;  
        }
        
        #mainContents
        {
            position:absolute;
　　　　　　　　　　 word-wrap:break-word；
            width:60%;
            height:50%;
            background-color:red;
            margin:10% 20% 0 20%;
            z-index:1;
        }
    </style>
    <script type="text/javascript">
        
    </script>
</head>
<body>
    <div id="TopBackGround">
        <div id="backgroundbg2"></div>
        <div id="mainContents">
            testtesttestetesttesttest
        </div>
    </div>
    <script type="text/javascript" >

            var interval = null,
                oldHeight = 0;

            interval = setInterval(update, 1000);

            function update() {

                var TopBackGround = document.getElementById("TopBackGround"),
                    backgroundbg2 = document.getElementById("backgroundbg2");

                if (oldHeight != TopBackGround.offsetHeight) {
                    oldHeight = TopBackGround.offsetHeight
                    backgroundbg2.style.height = oldHeight + "px";
                    backgroundbg2.style.width = TopBackGround.offsetWidth + "px";
                }
            }
    </script>
</body>
</html>