zoukankan      html  css  js  c++  java
  • background-attachment:fixed应用

    设置为fixed属性,背景相对于屏幕窗口固定,然后如果有一张全屏的图片,再来一张全屏的图片,就可以看到与平时滚动屏幕不同的切换图片。代码
    CSS部分:

    html, body,.content{
            height: 100%;
    }
    h2, body { margin: 0;}
    .fixed-bg { 
            position: relative;
            background-size: cover;
            background-attachment: fixed;
            height: 100%;
            background-position: center center;
    }
    .bg-1 { 
             background-image: url("images/cd-background-1.jpg");
    }
    .container { 
            padding: 23% 1%;
               background-color: #C7ABAB; 
               height: 100%;
    }
    .bg-2 { 
            background-image: url("images/cd-background-2.jpg");
    }

    HTML部分:

    <div class="main content">
            <div class="fixed-bg bg-1">
                    <h2>此处是图片</h2>
            </div>
            <div class="fixed-bg bg-2">
                    <h2>又一张图片</h2>
            </div>
    </div>

    由此可以想到:如果图片之间加上内容 ,就会是比较新鲜的滚动方式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style type="text/css">
            html, body,.content{
                    height: 100%;
            }
            h2, body { margin: 0;}
            .fixed-bg { 
                    position: relative;
                    background-size: cover;
                    background-attachment: fixed;
                    height: 100%;
                     background-position: center center;
            }
            .bg-1 { 
                     background-image: url("images/cd-background-1.jpg");
            }
            .container { padding: 23% 1%;
                        background-color: #C7ABAB; 
                        height: 100%;}
            .bg-2 { 
                     background-image: url("images/cd-background-2.jpg");
            }
    
            </style>
            
    
    
    </head>
    <body>
            <div class="main content">
                    <div class="fixed-bg bg-1">
                            <h2>此处是图片</h2>
                    </div>
                    <div class="scrolling-bg"> 
                            <div class="container">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!</p>
                            </div>
                    </div>
    
    
                    <div class="fixed-bg bg-2">
                            <h2>又一张图片</h2>
                    </div>
                    <div class="scrolling-bg"> 
                            <div class="container">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!</p>
                            </div>
                    </div>
            </div>
    </body>
    </html>
  • 相关阅读:
    SpringCloudAlibaba学习笔记-简介
    SpringCloudAlibaba学习笔记-目录
    go语言学习笔记-目录
    go语言学习笔记-配置idea开发go编程语言并配置导入本地包
    go语言学习笔记-Windows10开发环境安装和环境变量配置
    我与阿里云的日常-QuickBI开发教程
    我与阿里云的日常-阿里云帐号注册
    消息队列 RabbitMq(6)高级特性
    消息队列 (5) RabbtMQ SpringBoot整合
    Nginx的安装和使用
  • 原文地址:https://www.cnblogs.com/samtrybest/p/5071210.html
Copyright © 2011-2022 走看看