zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    数据结构实验之栈四:括号匹配
    数据结构实验之栈三:后缀式求值
    8月7日学习
    8月6日学习
    8月5日学习
    8月4日学习
    周总结
    8月3日学习
    8月2日学习
    8月1日学习
  • 原文地址:https://www.cnblogs.com/nonkicat/p/2526635.html
Copyright © 2011-2022 走看看