css固定图⽚⼤⼩vue_接上篇：前端必看的8个HTML+CSS技
巧（下）
5. 图⽚视差效果
这个超级炫酷的效果在官⽹中⾮常的受欢迎，这种效果可以给⽤户带来视觉冲击，也给我们的⽹站带来了活⼒。普通的⽹页图⽚会跟随着⽹
页⼀起滑动，但是视觉差效果图就会固定在底部，只有图⽚所在的窗⼝上的元素会移动。
仅使⽤CSS
对你没有看错，这个效果只需要⽤到CSS就能轻易的实现！我们只要使⽤⼀个CSS背景图的属性background-attachment: fixed，这个特
性会把背景相对于视⼝固定。即使⼀个元素拥有滚动机制，背景也不会随着元素的内容滚动。
实现理论：
⼀、在含有图⽚的元素中加⼊background: url()和background-size: cover(第⼆个属性适⽤于定义图⽚为封⾯，可以让图⽚⼤⼩⾃动适应，在很⼤的屏幕也会显⽰完整的图⽚)
⼆、然后附加固定背景图的属性background-attachment: fixed
三、最后给这个元素加⼊⼀个⾼度height: 100%或者任意的⾼度height: 400px
就那么简单哦！不⽤怀疑，马上上代码，⼤家都可以⾃⼰去试试哦！
HTML
这⾥填写⼀堆⽂字就可以了，尽量多⼀点哦
CSS
.wrapper { height: 100wh;}.parallax-img { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size:
知识总结
background-attachment: fixed — 把背景相对于视⼝固定。即使⼀个元素拥有滚动机制，背景也不会随着元素的内容滚动。background-size:
cover — 可以让图⽚⼤⼩⾃动适应，在很⼤的屏幕也会显⽰完整的图⽚。
使⽤CSS + JavaScript
有些童鞋可能没有被这个震撼到或者还是觉得不够刺激。那我们再来⼀个⾼级例⼦，上⾯的例⼦在滑动的时候图⽚是固定死的。如果我们加上JavaScript的助⼒，我们可以让窗⼝的图⽚缓慢的跟随这个页⾯滑动，使得效果更有动⼒和更有冲击感。
实现理论
⾸先讲⼀下排版，因为我们需要在我们滑动页⾯的时候使⽤JavaScript偏移图⽚，所以我们需要给图⽚⼀个CSS属性让我们可以让图⽚可以根据⼀个速度来往上或者往下移动。这个例⼦⾥⾯我们让所有图⽚包裹在⼀个div⾥⾯，class名为block。这个div给予相对定位属性position: relative，这个时候我们就可以在⾥⾯加⼊图⽚，然后让图⽚绝对定位position: absolute在这个div盒⼦⾥⾯。
但是图⽚是可能很⼤的，我们需要把图⽚不超出我们定义个盒⼦，所以我们的div同时也给予了overflow: hidden和⼀个⾼度height: 100%。这样图⽚超出div盒⼦就会被隐藏。
布局代码如下：
视差速度 -1
视差速度 1
html, body{ margin: 0; padding: 0; height: 100%; width: 100%; font-family: 'Amatic SC', cursive;}.block{ width: 100%; height: 100%; positio 实现这个布局，在你滑动的时候，图⽚是不会移动的。因为最后⼀步就是加⼊JavaScript的辅助，让图⽚活起来。
知识总结
手机上可以打html与css的appposition: relative — 相对定位。position: absolute — 绝对定位。overflow: hidden — 如果需要，内容将被剪裁以适合填充框。不提供滚动
条。
6. 裁剪图像的动画
在有CSS3之前裁剪图⽚实现也是颇有难度的。现在我们有了两个⾮常⽅便简单的CSS3属性可以实现裁剪，那就是object-fit和object-
position, 这两个属性可以让我们改变图⽚的⼤⼩，但是不影响图⽚的长宽⽐。
当然我们可以使⽤图⽚处理⼯具或者使⽤JavaScript等插件来实现图⽚裁剪功能。但是因为有了CSS3的属性，我们不只可以裁剪，我们还
可以⽤裁剪的属性来做图⽚的动态效果。
为了让我们的例⼦更加简单，我们这⾥使⽤了复选框元素，这样我们就可以使⽤:checked的伪类来触发启动效果。所以在例⼦⾥⾯我们完全
不需要JavaScript的协助。
实现原理：
⼀、⾸先给予图⽚⼀个宽⾼height: 1080px，width: 1920px。
⼆、然后⽤CSS选择器，锁定当input被选中后img标签的样式变化。当被选中时，给图⽚设定⼀个新的宽⾼，这⾥我们给宽⾼各⾃500
像素：width: 500px，height: 500px。
三、然后我们加上了过渡效果和时间让图⽚改变宽⾼时有动画过渡效果：transition: width 2s, height 4s;。
四、最后加上object-fit: cover和object-position: left-top这两个属性来保持图⽚的宽⾼⽐例，这样就⼤功告成了！
我们来看看完成的代码：
勾选裁剪图⽚
input { transform: scale(1.5); /* 只是⽤来放⼤复选框⼤⼩ */ margin: 10px 5px; color: #fff;}img { width: 1920px; height: 1080px; transition: 0s;}/* css选择
知识总结
object-fit — CSS 属性指定可替换元素的内容应该如何适应到其使⽤的⾼度和宽度确定的框。
object-position — ⽤来切换被替换元素的内容对象在元素框内的对齐⽅式。
transition — 过渡可以为⼀个元素在不同状态之间切换的时候定义不同的过渡效果。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论