关注前端开发
关注用户体验

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

赞(58)
未经允许不得转载:大前端 » 这样的广告请再来一打 — background-attachment
分享到: 更多 (0)

评论 96

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

    Please let me know if you’re looking for a author for your
    site. You have some really good articles and
    I think I would be a good asset. If you ever want to take some of the load off, I’d really like to
    write some material for your blog in exchange for a link back to mine.
    Please blast me an email if interested. Thanks!

    agen judi10分钟前回复
  2. #95

    First of all I would like to say excellent blog! I had a quick question that I’d like to ask if you don’t
    mind. I was curious to know how you center yourself
    and clear your head before writing. I’ve had a difficult time clearing my mind in getting my ideas out.
    I do take pleasure in writing however it
    just seems like the first 10 to 15 minutes are generally wasted simply just trying to figure out how
    to begin. Any ideas or hints? Many thanks!

    dominoqq11分钟前回复
  3. #94

    Way cool! Some very valid points! I appreciate you writing
    this article and the rest of the website is very good.

  4. #93

    A motivating discussion is definitely worth comment. I do think that you ought to write more about
    this subject matter, it may not be a taboo subject but typically people do not talk about such topics.
    To the next! Many thanks!!

  5. #92

    Spot on with this write-up, I seriously think this web site
    needs far more attention. I’ll probably be back again to read more,
    thanks for the information!

  6. #91

    Thanks for any other informative blog. The place else could I get that type of information written in such an ideal
    manner? I have a undertaking that I am simply now running on, and I
    have been at the glance out for such info.

  7. #90

    First off I would like to say gredat blog! I had a quick question in hich I’d like to ask if you do not mind.
    I wwas interested to find out how you center yourself and ckear your mind
    prior to writing. I’ve had difficulty claring my thoughts in getting my
    ideas out. I trruly do take pleasure in writong however it just sems like the first 10 to 15 minutes are usually wasted jst trying to figure out how to begin. Any suggestions or hints?
    Cheers!

  8. #89

    I think that everything published was very logical. But, consider
    this, what if you were to write a awesome headline?
    I mean, I don’t want to tell you how to run your website,
    however suppose you added something that makes people desire
    more? I mean 这样的广告请再来一打 — background-attachment-大前端
    is a little vanilla. You might glance at Yahoo’s home page
    and note how they create post headlines to get viewers interested.
    You might try adding a video or a related pic or two to grab readers
    interested about everything’ve got to say. In my opinion, it would bring your
    blog a little bit more interesting.

  9. #88

    Hey! I could have sworn I’ve been to this website before but after
    browsing through some of the post I realized it’s new to
    me. Nonetheless, I’m definitely delighted
    I found it and I’ll be bookmarking and checking back frequently!

  10. #87

    Wow! This blog looks just like my old one! It’s on a entirely different topic but it
    has pretty much the same layout and design. Outstanding choice
    of colors!

  11. #86

    Hello! This post could not be written any better!
    Reading through this post reminds me of my previous room mate!
    He always kept chatting about this. I will forward
    this write-up to him. Pretty sure he will have a good read.
    Many thanks for sharing!

  12. #85

    What i do not realize is if truth be told how you’re no longer actually
    much more smartly-appreciated than you may be right now.
    You are very intelligent. You realize thus considerably when it comes to this topic, made me personally imagine it from a lot of
    varied angles. Its like men and women don’t seem to be involved except it is something to do with
    Woman gaga! Your own stuffs excellent. All the time
    handle it up!

  13. #84

    I am really glad to read this weblog posts which contains plenty of useful information, thanks for providing these kinds of data.

  14. #83

    It’s awesome to visit this web page and reading the views of all
    friends about this article, while I am also eager of getting experience.

  15. #82

    Wow that was strange. I just wrote an really long comment
    but after I clicked submit my comment didn’t show up. Grrrr…

    well I’m not writing all that over again. Regardless, just wanted to
    say great blog!

  16. #81

    Good day very nice website!! Man .. Excellent ..

    Amazing .. I’ll bookmark your blog and take the feeds additionally?
    I am happy to search out so many helpful info here within the publish, we want develop extra techniques in this regard, thanks for sharing.

    . . . . .

  17. #80

    Hello, i think that i saw you visited my site thus
    i came to “return the favor”.I’m attempting to find things to
    enhance my site!I suppose its ok to use a few of your ideas!!

  18. #79

    Hola! I’ve been reading your weblog for a while now
    and finally got the bravery to go ahead and give you a shout out from Porter Texas!
    Just wanted to mention keep up the great work!

  19. #78

    Helpful info. Lucky me I found your website
    by chance, and I’m shocked why this twist of fate didn’t happened earlier!
    I bookmarked it.

  20. #77

    Great post. I used to be checking constantly this blog
    and I’m inspired! Very helpful info specifically the remaining phase
    🙂 I take care of such info much. I was seeking this certain information for a long time.
    Thank you and best of luck.

  21. #76

    you’re actually a excellent webmaster. The website loading pace is
    amazing. It kind of feels that you’re doing any distinctive trick.
    Furthermore, The contents are masterwork. you’ve performed a wonderful activity on this topic!

  22. #75

    Thank you a bunch for sharing this with all folks you really understand what you’re speaking approximately!

    Bookmarked. Kindly also talk over with my website =).

    We can have a link change agreement between us

  23. #74

    Hmm it appears like your website ate my first comment (it was super long) so I guess I’ll just sum it up what I wrote and say,
    I’m thoroughly enjoying your blog. I too am an aspiring blog writer but I’m still new to the whole thing.
    Do you have any suggestions for beginner
    blog writers? I’d definitely appreciate it.

  24. #73

    Hi there, I wish for to subscribe for this website to get newest updates, thus where can i do it please help.

  25. #72

    Really no matter if someone doesn’t understand afterward
    its up to other people that they will help, so here it happens.

  26. #71

    Fantastic beat ! I wish to apprentice even as you amend your
    site, how can i subscribe for a blog web site? The account helped me a acceptable deal.
    I have been tiny bit acquainted of this your broadcast provided brilliant transparent concept

  27. #70

    Hello there, There’s no doubt that your web site
    may be having internet browser compatibility problems.
    When I look at your web site in Safari, it looks fine however, when opening
    in IE, it’s got some overlapping issues. I just wanted to provide you with
    a quick heads up! Aside from that, excellent site!

  28. #69

    Wow, incredible weblog format! How long have you
    ever been blogging for? you made blogging glance easy.
    The full glance of your website is great, let alone the content material!

  29. #68
  30. #67

    Fantastic website. A lot of useful information here.
    I am sending it to some buddies ans also sharing in delicious.
    And obviously, thanks on your sweat!

  31. #66

    I’ll immediately clutch your rss feed as I can’t find your e-mail subscription link or e-newsletter service.
    Do you have any? Kindly let me know in order
    that I may just subscribe. Thanks.

  32. #65

    For most recent information you have to pay a quick visit internet and on internet I found this web site as a best site for hottest
    updates.

  33. #64

    Wow, superb blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your web site is excellent, as well as the content!

  34. #63

    Great blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple adjustements would
    really make my blog jump out. Please let me know where
    you got your design. Bless you

  35. #62

    This article offers clear idea in support of the new
    users of blogging, that truly how to do blogging.

  36. #61

    I got this web site from my buddy who shared with me on the topic
    of this web site and now this time I am visiting this web site
    and reading very informative articles here.

  37. #60

    Hi, everything is going nicely here and ofcourse every one
    is sharing facts, that’s genuinely excellent, keep up writing.

  38. #59

    Hello would you mind letting me know which hosting company you’re utilizing?
    I’ve loaded your blog in 3 different browsers and I must say this blog loads a lot faster then most.
    Can you suggest a good web hosting provider at a fair price?
    Many thanks, I appreciate it!

  39. #58

    I’d like to find out more? I’d love to find out more details.

    Agen Judi1周前 (06-12)回复
  40. #57

    Sweet blog! I found it while browsing on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!
    Thank you

  41. #56

    I’m not that much of a online reader to be honest but your blogs
    really nice, keep it up! I’ll go ahead and bookmark your
    site to come back in the future. Cheers

    id pro poker v1周前 (06-11)回复
  42. #55

    Way cool! Some very valid points! I appreciate you writing this write-up and also the rest
    of the website is really good.

    Quincy1周前 (06-11)回复
  43. #54

    Hello my loved one! I wish to say that this article is awesome,
    great written and include approximately all significant infos.
    I’d like to see more posts like this .

    Domino 99 poker1周前 (06-11)回复
  44. #53

    Heya i’m for the first time here. I found this board and I find It really useful & it
    helped me out much. I hope to give something back and aid others like you
    helped me.

    info online matc1周前 (06-10)回复
  45. #52

    Incredible points. Outstanding arguments. Keep up the good spirit.

  46. #51

    Hi there, this weekend is good designed for me, for the reason that this time i am reading this impressive educational article here at my residence.

  47. #50

    Great blog here! Also your website loads up fast! What web host are you using?
    Can I get your affiliate link to your host? I wish my website loaded up as fast as yours lol

  48. #49

    I do not know if it’s just me or if everybody else experiencing problems
    with your blog. It seems like some of the text in your content are running off the screen. Can someone else please provide feedback
    and let me know if this is happening to them too?

    This may be a problem with my internet browser because I’ve had this happen before.
    Many thanks

  49. #48

    Wow that was unusual. I just wrote an incredibly long comment but after
    I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyhow, just wanted
    to say great blog!

  50. #47

    I think this is one of the most vital info for
    me. And i am glad reading your article. But want to remark
    on few general things, The site style is wonderful, the articles is really excellent : D.

    Good job, cheers

    Luis2周前 (06-07)回复
  51. #46

    Nice post. I used to be checking constantly this weblog and I am impressed!
    Very helpful information particularly the final section 🙂 I maintain such info a lot.
    I used to be looking for this certain info for a very long time.
    Thank you and good luck.

  52. #45

    Thanks for any other informative site. Where else could I get that type of info written in such an ideal approach?
    I have a challenge that I’m simply now working on, and I’ve been on the look out
    for such information.

  53. #44

    Hi there! I know this is kinda off topic however , I’d figured I’d ask.
    Would you be interested in exchanging links or maybe guest writing a blog
    post or vice-versa? My site addresses a lot of the same topics as
    yours and I think we could greatly benefit from each other.
    If you are interested feel free to shoot me an email. I look forward to hearing from you!
    Superb blog by the way!

  54. #43

    certainly like your web-site but you need to test the spelling on several of your posts.
    Several of them are rife with spelling issues and
    I in finding it very bothersome to tell the reality however
    I’ll surely come again again.

  55. #42

    This article gives clear idea in support of the new viewers of
    blogging, that in fact how to do running a blog.

  56. #41

    This website was… how do you say it? Relevant!!
    Finally I’ve found something which helped me.
    Kudos!

  57. #40

    I delight in, result in I found exactly what I was having a look for.
    You have ended my four day lengthy hunt! God Bless you man. Have a nice day.
    Bye

    Milla2周前 (06-06)回复
  58. #39

    If some one needs to be updated with most recent technologies afterward he must be
    visit this website and be up to date every day.

  59. #38

    I have read so many content regarding the blogger lovers however this paragraph is actually a fastidious article, keep it up.

  60. #37

    Greetings! Very useful advice within this article!
    It’s the little changes that make the most
    important changes. Many thanks for sharing!

    totopoker2周前 (06-06)回复
  61. #36

    Hello there! Do you use Twitter? I’d like to follow you
    if that would be ok. I’m undoubtedly enjoying your blog and look forward to
    new updates.

  62. #35

    WOW just what I was searching for. Came here by searching for
    judi online 2019 calendar

    Anita2周前 (06-05)回复
  63. #34

    I was suggested this website by my cousin. I am
    not sure whether this post is written by him as nobody else know such
    detailed about my trouble. You are amazing! Thanks!

  64. #33

    I am really impressed with your writing skills
    as well as with the layout on your weblog. Is this a paid theme or did you modify it yourself?
    Either way keep up the nice quality writing, it’s rare to see a nice blog like this one today.

  65. #32

    Unquestionably consider that which you stated. Your favourite reason seemed to be at
    the web the easiest factor to have in mind of. I say to you,
    I certainly get annoyed while other folks consider concerns that they plainly do not recognise about.

    You managed to hit the nail upon the top as smartly
    as outlined out the entire thing without having side-effects , folks can take a signal.

    Will probably be again to get more. Thank you

  66. #31

    Hey, I think your site might be having browser compatibility issues.

    When I look at your blog in Opera, it looks fine but when opening
    in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up!

    Other then that, very good blog!

  67. #30

    Its not my first time to pay a quick visit this web site, i am visiting this site dailly and obtain pleasant data from here everyday.

  68. #29

    I have been exploring for a little for any high-quality articles or blog posts
    on this kind of space . Exploring in Yahoo I
    ultimately stumbled upon this site. Reading this info So i am satisfied to show that I’ve an incredibly
    just right uncanny feeling I came upon exactly what I
    needed. I so much indubitably will make sure to
    do not overlook this web site and provides it a glance
    on a continuing basis.

  69. #28

    What’s up i am kavin, its my first occasion to commenting anyplace, when i
    read this post i thought i could also create comment due to this sensible article.

  70. #27

    Keep on writing, great job!

  71. #26

    After I originally commented I seem to have clicked the -Notify me when new comments are
    added- checkbox and from now on each time a comment is added I get 4 emails with the exact same
    comment. There has to be a means you are able to remove
    me from that service? Cheers!

  72. #25

    I’m not that much of a online reader to be honest but your blogs really nice,
    keep it up! I’ll go ahead and bookmark your site to come back in the future.
    Cheers

  73. #24

    Hello, this weekend is pleasant designed for me, since this occasion i
    am reading this wonderful educational post here at
    my house.

    taruhan online2周前 (06-03)回复
  74. #23

    This is really interesting, You’re a very skilled blogger.

    I’ve joined your rss feed and look forward to
    seeking more of your great post. Also, I have shared your site
    in my social networks!

  75. #22

    Hi there, I desire to subscribe for this web site to get most up-to-date updates,
    therefore where can i do it please help.

  76. #21

    Hey there! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche.
    Your blog provided us beneficial information to work on. You have done a outstanding
    job!

    Poker2周前 (06-03)回复
  77. #20

    Very nice post. I just stumbled upon your weblog and wanted
    to say that I’ve really enjoyed browsing your blog posts.
    After all I’ll be subscribing to your feed and I hope you write again soon!

    Tangela2周前 (06-03)回复
  78. #19

    Excellent way of telling, and good piece of writing to get facts on the topic of
    my presentation subject matter, which i am going to convey
    in university.

  79. #18

    We are a group of volunteers and starting a new scheme in our community.
    Your website offered us with valuable info to work on. You have done a formidable job and our whole community will be grateful to
    you.

    qq domino2周前 (06-03)回复
  80. #17

    Excellent way of explaining, and nice post to get data regarding my presentation topic, which i am going to present in school.

  81. #16

    No matter if some one searches for his necessary thing, so he/she wishes to be available that in detail,
    so that thing is maintained over here.

    Adu Balak2周前 (06-02)回复
  82. #15

    Kitap Fiyatları Kitap Kurdu En Cok Satanlar

    bookszone.site123.me1个月前 (05-17)回复
  83. #14

    Hepsiburada Kitap Al Internetten Kitap Alımı

    book1个月前 (05-17)回复
  84. #13

    En Ucuz Kitap Al En Çok Okunan Kitaplar Listesi

  85. #12

    En Iyi Roman Kitapları 2016 Kitap Siteleri Isimleri

    download pdf1个月前 (05-14)回复
  86. #11

    Hello there, have you ever in your life thought about to publish regarding Nintendo or PSP?

    Marcellus Brummell1个月前 (05-14)回复
  87. #10

    my voice sucks on karaoke that is why i am taking sining lessons now from professionals*

    Nonton Anime1个月前 (05-10)回复
  88. #9

    I found your entry interesting do I’ve added a Trackback to it on my weblog

    cat1个月前 (05-08)回复
  89. #8

    very nice post, i surely love this web site, keep on it

    agen poker2个月前 (05-05)回复
  90. #7

    Great work! That is the kind of info that are meant to be shared around the net. Disgrace on search engines for not positioning this submit higher! Come on over and seek advice from my site . Thanks =)

    rajapoker2个月前 (05-03)回复
  91. #6

    erekcja u lekarza

  92. #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!

    my singing monsters3个月前 (03-28)回复
  93. #4

    这个效果挺好的

    dain3个月前 (03-15)回复
  94. #3

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

    Wilbert Shaben3个月前 (03-11)回复
  95. #2

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

    青青4个月前 (02-22)回复
  96. #1

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

    yehetju5个月前 (01-16)回复

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

立即前往