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

之前都是用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;

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

很炫酷的一个特效。

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

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

具体代码如下：

<a href="#homes">作品</a>
<a name="homes"></a>

使用<a name="homes"></a>创建一个锚点，使用<a href="#homes"></a>跳转到锚点。

最后编辑于：2017.12.04 05:47:28

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。