在現代網頁設計中，大背景圖設計非常流行。隨著高清（現在是4K）顯示器的出現，越來越多的網頁設計師使用大背景圖來填充屏幕。

因為這樣可以造成很大的視覺沖擊力，並有助於更好的傳遞所要表現的內容。

但是，如果只是吧大背景簡單的放在網頁上效果有限。使用 CSS，偶爾結合 JavaScript ，可以創造出一些驚人的特效。

CSS 混合模式的顏色變化

這種背景效果之所以如此之酷，是因為當用戶滾動時，頂部的固定元素似乎會改變顏色。CSS mix-blend-mode 屬性的使用允許改變色調化，這取決於背景的內容。

See the Pen CSS background change on scroll by Giana (@giana) on CodePen.0
 

滾動動畫

這一技術讓人想起了過去的小遊戲，它的特點是兩種截然不同的圖像向相反的方向滾動。他可以在 CSS transform 和一些 JS 的幫助下完成的。

See the Pen GSAP Animate CSS background-position by Jonathan Marzullo (@jonathan) on CodePen.0

斜切效果

斜切背景是網頁設計中最熱門的趨勢之一。這在印刷設計中是一個非常容易實現的效果，但是在網頁上實現很痛苦 – 直到現在。這裏有一個純 HTML / CSS 解決方案，使其變得簡單。

See the Pen skew bg by Marcel (@MKasio) on CodePen.0
 

圖片切換效果

使用一個相當簡單的 CSS，允許背景在多個圖像之間進行平滑的轉換。它比傳統的 JavaScript 更輕量。

See the Pen Fullscreen CSS Background Image Slideshow by Kevin Lesht (@klesht) on CodePen.0

漸變動畫效果

如果不仔細的處理，動畫背景就會分散你的註意力。這個動畫漸變的例子處理的很好，因為這個動畫效果做的很微妙。使用 JavaScript，您可以定義漸變顏色。

See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.0
 

滾動時模糊視覺效果

當你真的希望訪問者把註意力集中在背景圖像的上面一層的內容（比如新聞報道的標題），讓文本可以輕松閱讀時，滾動時模糊視覺效果可能會非常有用。少量的jQuery 可以在滾動時改變 background-size 屬性來創建這種效果。

See the Pen Zoom and Blur background Image by Zach Richard (@zrichard) on CodePen.0

淡入主頁橫幅並且滾動時覆蓋

在這個例子做了一些事情。首先，一個頂部全屏的主頁橫幅添加了一個顏色疊加，以創建一個不同的色調。然後實現一個淡色動畫，以一種視覺平滑的方式來引入背景圖像。最後，在混入了一個視覺差滾動效果。這是一個非常現代的效果，只需要一點點 CSS 代碼( 無需 JS )。

See the Pen CSS background image stacking with fade and overlay by Rand Seay (@randseay) on CodePen.0

圖片移動放大縮小視覺效果

這是我們最近看到的一個效果。當用戶鼠標懸停在面板上時，背景圖像隨著光標的任何移動放大和平移。添加了一些交互性並保持用戶興趣的簡單方法。

See the Pen Zoom + pan the image on hover & mouse move by feiwen8772 (@feiwen8772) on CodePen.0

懸停比較效果

這個例子顯示了基於用戶的鼠標位置顯示背景的分屏。很強烈的比較，像“之前”和“後”的鏡頭。

See the Pen CSS Background reveal by Eric Karkovack (@karks88) on CodePen.0

滾動時改變顏色效果

有時我們會忘記使用簡單的純色是多麽的強大。在這裏，我們可以看到背景顏色根據滾動位置的變化而產生變化。這種輕量級的解決方案就跟使用大背景圖一樣直觀效果。

See the Pen Changing Background Color on Scroll by Jack Harner (@jackharner) on CodePen.0

背景不再只是體現內容框的一種手段 – 現在，他們通常是內容本身的一部分。有這麽多有趣的方式可以利用它們，嘗試各種背景技術是值得的，看看他們如何提高下一個項目的用戶體驗。

原文地址：https://segmentfault.com/a/1190000016830479

炫酷 CSS 背景效果的 10 個代碼片段