头闻号

深圳市派头科技有限公司

综合性公司|护肤膏霜|保健食品

首页 > 新闻中心 > 科技常识:background
科技常识:background
发布时间:2024-11-15 00:23:05        浏览次数:1        返回列表

今天小编跟大家讲解下有关background-attachement视差滚动 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关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>

来源:爱蒂网