视差滚动

最新推荐文章于 2021-12-11 11:44:53 发布

__Begin

最新推荐文章于 2021-12-11 11:44:53 发布

阅读量179

点赞数 1

分类专栏： Css 文章标签：视差滚动

本文链接：https://blog.csdn.net/weixin_42748455/article/details/88104766

版权

Css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

视差滚动指的是网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。

这里话不多说直接用一个例子说明吧：

<!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 >
        .shicha{
            width:100%;
            height:500px;
            background-image:url("public/images/xing.png");
            background-repeat:no-repeat;
            background-attachment: fixed;
            background-position:center center;
            background-size:cover;
        }
        .shicha p{
            color:#fff;
            font-size:16px;
            text-align:center;
        }
    </style> 
</head>
<body>
    <div style="width:100%;height:1000px;"></div>
    <div class="shicha">
        <p>这是测试视差滚动</p>
    </div>
    <div style="width:100%;height:1000px;"></div>
    
</body>
</html>

其实主要用到的就是 background-attachment:fixed; 是指将图片背景设置成固定不动的；

这个css属性可以参考 http://www.w3school.com.cn/cssref/pr_background-attachment.asp 里面的简介

__Begin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
视差滚动

视差滚动指的是网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。这里话不多说直接用一个例子说明吧：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&quot
复制链接

扫一扫

专栏目录