zoukankan      html  css  js  c++  java
  • background-attachment:fixed,背景图滚动切换视觉差效果

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>背景图实现视觉差的效果</title>
        <style>
            div.g-img {
                width: 100%;
                height: 100vh;
                text-align: center;
                line-height: 100vh;
                font-size: 50px;
                font-size: 700;
            }
    
            .g-img:nth-child(1) {
                background: url(http://pic1.win4000.com/wallpaper/2018-05-18/5afe820a3446b.jpg)center no-repeat;
                background-size: cover;
                background-attachment: fixed;
            }
            
            .g-img:nth-child(2) {
                background: url(http://pic1.win4000.com/wallpaper/2018-07-04/5b3c7fd2d66ff.jpg)center no-repeat;
                background-size: cover;
                background-attachment: fixed;
            }
            
            .g-img:nth-child(3) {
                background: url(http://pic1.win4000.com/wallpaper/2019-12-13/5df321951329d.jpg)center no-repeat;
                background-size: cover;
                background-attachment: fixed;
            }
            
            .g-img:nth-child(4) {
                background: url(http://pic1.win4000.com/wallpaper/6/5847b8f8a63db.jpg)center no-repeat;
                background-size: cover;
                background-attachment: fixed;
            }
        </style>
    </head>
    
    <body>
        <div class="g-img">section1</div>
        <div class="g-img">section2</div>
        <div class="g-img">section3</div>
        <div class="g-img">section4</div>
    
    </body>
    
    </html>
    View Code

    效果图如下:

  • 相关阅读:
    机器学习:简介
    对API的理解
    软件的运行
    大数据:数据库概念及分类
    Python:easygui的安装、导入、使用、设置
    Python:模块详解及import本质
    Python:urllib模块的urlretrieve方法
    jQuery操作checkbox实例
    ASP.NET MVC 路由调试工具Router Debugger
    认识Visual Studio 条件编译
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/12206040.html
Copyright © 2011-2022 走看看