CSS颜色透明渐变

最新推荐文章于 2024-05-15 16:27:27 发布

chhubert

最新推荐文章于 2024-05-15 16:27:27 发布

阅读量1.7k

点赞数

文章标签： css div function null url

本文链接：https://blog.csdn.net/chhubert/article/details/7765083

版权

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

chhubert

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS颜色透明渐变

#TopBackGround { width:200px; height:300px; margin:0 100px 0 0 ; background-image:url(background_img.png); position:relative;
复制链接

扫一扫