这几年的web设计中，大靠山的设计变得越来越盛行。特别是在现在大屏大行其道的情况下，设计师在设计中越来越多的使用大分辨率的靠山图来填充屏幕，这样更能制造怪异的视觉效果，能更好的转达他们想要向用户转达的内容。

然则，大部分的设计仅仅是硬生生的把大靠山图填充就了事了。实在，借助于CSS和JavaScript的气力，可以建立一些怪异的视觉效果，可以使体验加倍优雅。

下面就来陈列一些使用差别的CSS和JavaScript手艺来建立的一些怪异的带有大靠山的视觉效果，固然也会对它们所使用的手艺做一个简朴的说明，可以快速的应用到项目中去。

CSS颜色夹杂模子(Blend Mode)视觉效果

CSS的夹杂模子(Blend Mode)是一个新属性，可以实现Photoshop中的图层的夹杂模子的效果。行使它和鼠标的转动可以实现一些异常酷的颜色转动效果。好比下面这个例子就使用CSS的夹杂模子(Blend Mode)和靠山图片实现的一个效果：

详细的代码可以去这里查看。

视差转动动画

视差转动的应用在web中已经应用的很普遍了，也又许多种显示形式，这里说的这种是两个差别的图片在水平偏向上往差别的偏向运动：

详细代码地址。

斜切视觉效果

把靠山图片举行一定角度的斜切的视觉效果，在最近这段时间已经风靡设计圈了。在之前要实现这样的效果，可能要做许多分外的事情。不外现在好了，行使CSS新的属性transform可以异常轻松的实现这样的效果：

详细代码地址。

渐变动画视觉效果

若是，运用大量靠山图片动画，可能会涣散用户的注意力。使用渐变颜色的动画，在一些场景下就不会有这样的问题，由于渐变颜色的动画效果异常的微弱，在视觉上不会造成很大的滋扰：

详细代码地址。

转动模糊视觉效果

转动模糊这种视觉效果也应用的异常广，特别是当你想使用靠山图片吸引用户而且还能让用户在转动的时刻阅读图片上文字的时刻，就很适合使用它。只需要借助一点点JavaScript来改变图片的background-size属性就可以实现这样的效果：

详细代码地址。

视差转动Hero Image图片效果

下面这个效果应用的也异常多。首先，是一张大的图片在文章的顶部而且图片上面还覆盖了一个遮罩图层用来营造一种差别的颜色视觉效果。然后用渐隐渐显的动画效果来引入图片，最后在转动的时刻，使用了视差的效果来隐藏图片。这个效果完完全全只需要一点点CSS代码，不需要JavaScript。

代码地址。

图片移动放大缩小视觉效果

下面这个效果在一些电商网站上用的比较多。当鼠标在图片移动的时刻，图片会追随鼠标的位置放的图片该位置以便可以看到更多的细节。这种简朴的交互可以很好的吸引用户的注意力。

代码地址。

图片前后对比视觉效果

这种效果经常用来对比图片使用，好比在一些压缩图片的网站上，就经常使用这种效果来对比压缩前和压缩后图片效果，用来突出压缩效果。

代码地址。

转动改变颜色视觉效果

有时刻仅仅是简简朴单的改变一下靠山的颜色就可以起到四两拨千斤的效果。好比下面这个效果，就是通过监听网页转动的位置来改变靠山颜色，简简朴单就可以营造一种别样的视觉效果。

代码地址。

一点点看法

在新的设计理念中，靠山图片不再仅仅是一种设计的显示手段，而是内容的一部分。这一点从现在许多的web上也可以看出来，有林林总总的 *** 来增强图片在内容中的重要性，也有林林总总的手艺来通过使用图片提高用户的使用体验。

本文主要是从10 Snippets for Creating Unique CSS Background Effects这篇文章整理而来，有删减，有疏漏或者明白不到位的地方，还请多多指教！