前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍如何用CSS完成视差滚动的效果。

文章目录

前言
一、视差滚动是什么
二、background-attachment

一、视差滚动是什么

视差滚动（Parallax Scrolling）就是多层背景以不同速度移动，形成立体的运动效果。
网页解析成：背景层、内容层、悬浮层

二、background-attachment

background-attachment的作用是设置背景图像是否固定或者随着页面的其余部分滚动；
（1）scroll：默认值，随着滚动；
（2）fixed：当页面的其余部分滚动时，背景图像不会移动；
（3）inherit：继承父元素background-attachment属性的值。

例子：

<style>div {height: 100vh;background: rgba(0, 0, 0, .7);color: #fff;line-height: 100vh;text-align: center;font-size: 20vh;}.a-img1 {background-image: url('img1.jpg');background-attachment: fixed;background-size: cover;background-position: center center;}.a-img2 {background-image: url('img2.jpg');background-attachment: fixed;background-size: cover;background-position: center center;}.a-img3 {background-image: url('img3.jpg');background-attachment: fixed;background-size: cover;background-position: center center;}
</style><body><div class="a-text">1</div><div class="a-img1">2</div><div class="a-text">3</div><div class="a-img2">4</div><div class="a-text">5</div><div class="a-img3">6</div><div class="a-text">7</div>
</body>

【前端知识之CSS】CSS视差滚动相关推荐

【面试题】1014- 面试官：如何使用CSS完成视差滚动效果?
一.是什么视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层.内容层.悬浮层当滚动鼠标滑轮的时候 ...
17.使用CSS完成视差滚动效果?
一.是什么视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层.内容层.悬浮层当滚动鼠标滑轮的时候 ...
前端知识大全之CSS（含有JS）
目录一.概念讲解学习CSS之前必学的HTML (超链接) 二.正文代码 1.行内样式 2.内部样式(选择器) 3.外部样式 4.样式的优先级 5.简单选择器之定义单个标签(id) 6.简单选择器之 ...
「CSS深度指北」前端知识梳理之CSS篇（中秋国庆特别篇）
认识浏览器组成部分可能一说组成部分,小伙伴们就直接懵了,开门见山地说,别怕,还有更懵的在后面呢! 组成分为两大部分: shell 和内核(其中内核是核心部分,它代表着浏览器所使用的技术手段,而s ...
html+css实现视差滚动
0x00 HTML代码 <div class="main"> <section class="list-item"> <div c ...
[css] 什么是视差滚动？如何实现视差滚动的效果？
[css] 什么是视差滚动?如何实现视差滚动的效果? 什么是视差滚动: 就是在同一视角下,鼠标或者页面滚动时,不同元素以不同的速率跟随滚动,产生生动的效果. 如何实现视差滚动: 根据页面滚动高度的变化 ...
前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
【前端开发基础】CSS基础知识以及CSS3
文章目录一.CSS层叠样式 (一) 目标 1.CSS简介 1.1 HTML的局限性 1.2 CSS网页的美容师 1.3 CSS语法规范 1.4 CSS代码风格 (1)样式格式书写 (2)样式大小写风 ...

【前端知识之CSS】CSS视差滚动

前言

文章目录

一、视差滚动是什么

二、background-attachment

【前端知识之CSS】CSS视差滚动相关推荐

最新文章

热门文章