這樣的廣告請再來一打 — background-attachment

摘要： 大多數時候，我們看到的廣告都是固定在頁面的某個位置，如下圖的首頁，一看就知道是硬廣啦。 看到標題是不是很疑惑，什麼樣的廣告，想再來一打？不廢話，先來看看效果吧。 See the Pen 視覺差 by cc ( @glccgl ) on CodePen . 大多數時候看...

大多數時候，我們看到的廣告都是固定在頁面的某個位置，如下圖的首頁，一看就知道是硬廣啦。

看到標題是不是很疑惑，什麼樣的廣告，想再來一打？不廢話，先來看看效果吧。

See the Pen ofollow,noindex" target="_blank">視覺差 by cc ( @glccgl ) on CodePen .

大多數時候看到這種視覺差效果都是在一些比較簡潔的頁面，很少用在廣告上（目前只在知乎上看到過，每次都想多撇幾眼）。

以上效果主要使用background-attachment實現，該屬性設定背景影象是否固定或者隨著頁面的其他部分滾動。來學習一下幾個主要的取值：

1、local 表示背景 相對於元素的內容 固定，如果元素可滾動，則背景將會隨著元素的內容滾動

2、scroll 表示背景 相對於元素本身 固定，如果元素可滾動，背景不隨著內容滾動

3、fixed 表示背景 相對於視口 固定，如果元素可滾動，背景不隨著元素的內容滾動

可通過以下demo體會

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