新会员白菜网送体验金前端开发
新会员白菜网送体验金用户体验

这样的广告请再来一打 — 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.

注册就送10元(52)
未经允许不得转载:大前端 » 这样的广告请再来一打 — background-attachment
分享到: 更多 (0)

评论 6

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #6

    erekcja u lekarza

  2. #5

    My brother suggested I may like this website. He was totally right. This put up actually made my day. You cann’t consider just how much time I had spent for this info! Thanks!

  3. #4

    这个效果挺好的

    dain1个月前 (03-15)回复
  4. #3

    italian foods are very tasty and most of their recipes are heart friendly too`

    Wilbert Shaben1个月前 (03-11)回复
  5. #2

    招聘:web前端,
    薪 资:12k–30k人民币,具体根据实际工作能力,专业面试评级确定。
    工作地点:泰国
    福利:正规工作签证、包食宿、团建聚餐、节假日活动,带薪回国休假报销来回机票
    其他岗位:安卓、IOS、java开发,软件测试
    联系方式:QQ2084458993
    微信:TH0631280401
    泰国电话:+66 0631280401

    青青2个月前 (02-22)回复
  6. #1

    很炫啊,创意很不错,,谢谢分享~

    yehetju3个月前 (01-16)回复

themebetter 国内更好的WordPress主题服务商

立即前往
博聚网