前端必看的8个HTML+CSS技巧 （五） 图片视差效果

图片视差效果

这个超级炫酷的效果在官网中非常的受欢迎，这种效果可以给用户带来视觉冲击，也给我们的网站带来了活力。普通的网页图片会跟随着网页一起滑动，但是视觉差效果图就会固定在底部，只有图片所在的窗口上的元素会移动。

仅使用CSS

对你没有看错，这个效果只需要用到CSS就能轻易的实现！我们只要使用一个CSS背景图的属性background-attachment: fixed，这个特性会把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

实现理论：

一、在含有图片的元素中加入background: url()和background-size: cover（第二个属性适用于定义图片为封面，可以让图片大小自动适应，在很大的屏幕也会显示完整的图片）

二、然后附加固定背景图的属性background-attachment: fixed

三、最后给这个元素加入一个高度height: 100%或者任意的高度height: 400px

就那么简单哦！不用怀疑，马上上代码，大家都可以自己去试试哦！

HTML

<div class="wrapper">
   <div class="parallax-img"></img>
   <p>这里填写一堆文字就可以了，尽量多一点哦</p>
</div>

CSS

.wrapper {
  height: 100wh;
}
.parallax-img {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {
  font-size: 20px;
  padding: 1.5rem 3rem;
  min-height: 1000px; // 当你的文字内容不够，也能撑出足够的高度来看到效果，当然如果你文字足够多，就不需要了
}

🌟知识总结

• background-attachment: fixed — 把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

• background-size: cover — 可以让图片大小自动适应，在很大的屏幕也会显示完整的图片。

微信号：739977464  请注明来意 

喜欢记得「点赞」或「在看」，让我们一起成长。

关注我们，点击下方二维码长按识别。