前端常见问题
选课中心 APP下载
当前位置:首页 > 技能类 > 前端 > 常见问题 > 这样的广告请再来一打 — background-attachment

这样的广告请再来一打 — background-attachment

更新时间:2020-01-21 10:46:59 来源: 阅读量:

【摘要】 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。考必过为大家整理了这样的广告请再来一打 — background-attachment,想学习前端的小伙伴可以看过来!这样的广告请再来一打 — background-attachment的详细内容如下:

这样的广告请再来一打  —  background-attachment

大多数时候,我们看到的广告都是固定在页面的某个位置,如下图的首页,一看就知道是硬广啦。

 

 

看到标题是不是很疑惑,什么样的广告,想再来一打?不废话,先来看看效果吧。

See the Pen 视觉差 by cc (@glccgl) on CodePen.

这种视觉差效果很少用在广告上(目前只在知乎上看到过,每次都想多撇几眼)。

以上效果主要使用background-attachment实现,该属性设置背景图像是否固定或者随着页面的其他部分滚动。来学习一下几个主要的取值:

1、local 表示背景相对于元素的内容固定,如果元素可滚动,则背景将会随着元素的内容滚动

2、scroll 表示背景相对于元素本身固定,如果元素可滚动,背景不随着内容滚动

3、fixed 表示背景相对于视口固定,如果元素可滚动,背景不随着元素的内容滚动

可通过以下demo体会

See the Pen background-attachment by cc (@glccgl) on CodePen.

以上就是这样的广告请再来一打 — background-attachment的详细内容,在学习前端的过程中大家要学会利用网络解决问题。只看理论是不能带来提到的,将学到的知识进行实践才能帮助我们熟悉代码的运用,特别是项目经验,可以为我们带来很大的提升哦!

分享到: 编辑:admin