当前位置:编程学习 > 网站相关 >>

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>

 

 

摘自 のんきネコ

补充:Web开发 , 其他 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,