当前位置： 移动技术网 > IT编程>网页制作>CSS > 视差滚动-background-attachement

视差滚动-background-attachement

2018年09月15日  | 移动技术网IT编程  | 我要评论

之前项目中没有涉及到视觉滚动的网站，但是毕竟是一种常用的网站类别，不得不了解。实现方法很简单，做一下简单的分析。。。

概述：滚动视差是指多层背景以不同的速度移动，形成立体的运动效果，来带非常出色的视觉体验。

属性：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('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536924141216&di=f5d467e88b6f9c53cf984e468f7c79c6&imgtype=0&src=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f0117e2571b8b246ac72538120dd8a4.jpg%401280w_1l_2o_100sh.jpg');
}
.img2 {
background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536924182923&di=c27fca183f3ed28f4a37c2bd3fc862be&imgtype=0&src=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20170913%2f089d5ddc894f47009a31d895efa906e3.jpeg');
}
.img3 {
background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536924217709&di=a073d28b17223d5d88822301c5a4e36f&imgtype=0&src=http%3a%2f%2fpic14.nipic.com%2f20110605%2f1369025_165540642000_2.jpg');
}
</style>
<div class="img1">i am img1</div>
<div class="img2">i am img2</div>
<div class="img3">i am img3</div>

...end.

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网