图片自适应以及利用背景图片打造滚动视差效果

css图片自适应

之前都是用background-size:cover，但是有个问题。

全屏效果：

缩小一半后：

用了cover，自适应原来是从左上角开始缩放的。右边就被截掉了。

试试

background-repeat: no-repeat;
background-size: 100% 100%; 

结果，真是自适应，宽高全部缩放

但是如果图片比例不一致的话，很容易变行。。

没办法试试

background:url(pp/contact.jpg) no-repeat center center fixed;
background-size: cover; 

好吧，还是切割了，不过以图片中心缩放，还可以接受。具体用那种方法要具体看图片了。

滚动视差效果

demo可以看这里

很炫酷的一个特效。

具体是用了background-attachment:fixed实现。将背景图相对于windows窗口固定，再来回切换，可以实现这种视差效果，很简单的。

html页面内跳转

比如导航条有个 作品 按钮，页面有一部分是展示作品的，那么就可以用锚点来实现页面内跳转。

具体代码如下：

作品

使用创建一个锚点，使用跳转到锚点。