background-attachement视差滚动
之前项目中没有涉及到视觉滚动的网站,但是毕竟是一种常用的网站类别,不得不了解。实现方法很简单,做一下简单的分析。。。
概述:
滚动视差是指多层背景以不同的速度移动,形成立体的运动效果,来带非常出色的视觉体验。
属性:
background-attachment ,决定背景在视图中形态(固定、随区块固定),需配合background-image使用。
值:
background-attachment:scroll || local || fixed
local关键词表示背景相当于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动。
使用:
<style type="text/css">
div{
text-align: center;
line-height: 500px;
height: 500px;
font-size: 26px;
font-weight: 700;
color: #000;
background-size:cover ;
background-size:100% 100%;
background-attachment:fixed ;
}
.img1 {
background-image:url('4.jpg');
}
.img2 {
background-image:url('5.jpg');
}
.img3 {
background-image:url('2.jpg');
}
</style>
<div class="img1">i am img1</div>
<div class="img2">i am img2</div>
<div class="img3">i am img3</div>本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!