HTML CSS 背景固定小鹿图效果

最新推荐文章于 2024-05-31 14:59:34 发布

哲哲哲哲哲123

最新推荐文章于 2024-05-31 14:59:34 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/m0_61585359/article/details/121537697

版权

昨天效率有点低，没有上传小练习，今天补上；

主要使用的是背景属性中的固定背景图片，实际上应用并不是很多

类似于qq的页面链接：https://im.qq.com/index

代码

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100%;
            height: 1000px;
            /* 溢出裁切 */
            overflow: hidden;
        }
       .top1{
           background:url(./img/bg1.png) no-repeat center fixed ;
       }
       .top2{
           background:url(./img/bg2.png) no-repeat center fixed ;
       }
       .top3{
           background:url(./img/bg3.png) no-repeat center fixed ;
       }
       p{
           background: rgba(249, 247, 250, 0.8);
           height:100px;
           width: 100%;
           margin-top: 100px;
           text-align: center;
           line-height: 100px;
       }

    </style>
</head>
<body>
    <!--三张背景图 -->
    
    <div class="top1"><p>提示信息</p></div>
    <div class="top2"><p>提示信息</p></div>
    <div class="top3"><p>提示信息</p></div>
</body>