细节复盘2 （图片放足够大&高斯模糊&＜ style ＞ scoped&vue打开新的页面&轮播图抖动的问题 translateZ、translateY、垂直水平居中）2020-8-1

一时失言乱红尘 2023-03-04 03:28 7阅读 0赞

1、background-size 属性的 cover 值：

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。  
背景图像的某些部分也许无法显示在背景定位区域中。

https://www.runoob.com/cssref/css3-pr-background-size.html

2、 filter: blur(); 实现高斯模糊效果

https://blog.csdn.net/weixin\_39015132/article/details/81179775

filter 属性定义了元素(通常是img)的可视效果(例如：模糊与饱和度)。

[CSS3 滤镜filter: blur()高斯模糊的应用][CSS3 _filter_ blur]

3、HTML `<style> scoped` 新属性

scoped 属性是一个布尔属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

https://www.runoob.com/tags/att-style-scoped.html

4、vue路由页面跳转和打开新的页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]  
然后相关文职触发点击事件，传参  
![在这里插入图片描述][20200801111339236.png]

https://blog.csdn.net/w\_jiayou/article/details/105178545

**5、轮播图抖动的问题**  
讲真的，这个问题太致命了。这次做项目就遇到了这个问题。

用的vue脚手架，然后无语的是，在用框架里的轮播图的时候，发生了轮播图抖动的问题。**体现在，轮播图切换瞬间，下方凡是有定位的元素都跟着抖动。** 而且吧，这个问题在pc端没事，但是到了移动端不同尺寸的设备上，这个问题对他们的影响就有大有小了。

解决办法： 在包裹轮播图的容器加一条样式，下面这两个二选一

*  transform:translateZ(0)
 *  transform:translateY(0)

但我其实觉得还是选 transform:translateZ(0) 这个吧。它用来定义 3D 转换，只是用 Z 轴的值。大师兄理解的：Z轴，相对于屏幕远近的距离。

为什么使用 transform:translateZ(0) 这个能解决轮播图抖动问题呢？  
![在这里插入图片描述][20200801161016661.png]  
我也就查了查。  
![在这里插入图片描述][20200801161120747.png]  
![在这里插入图片描述][2020080116113187.png]  
[使用translateZ(0)提升性能的原理是什么？][translateZ_0]：https://segmentfault.com/q/1010000007962353

[一篇文章说清浏览器解析和CSS（GPU）动画优化][CSS_GPU]：https://segmentfault.com/a/1190000008015671

CSS3 transform 属性：[https://www.runoob.com/cssref/css3-pr-transform.html][https_www.runoob.com_cssref_css3-pr-transform.html]

6、根据上面的那个问题，我还顺带查到了一个**元素垂直水平居中**的方法。惊喜不。

translate有一个最常见的应用，即当元素宽度高度不固定时，使用translate可实现水平以及垂直方向的居中。

transform: translate(-50%, -50%); /*相对自身*/

转载于：CSS3 transform属性：[http://www.mamicode.com/info-detail-2143598.html][http_www.mamicode.com_info-detail-2143598.html]

[CSS3 _filter_ blur]: https://www.jianshu.com/p/56302d5c5f16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230208/40c14d940f524951a02e22228eb3c53a.png
[20200801111339236.png]: /images/20230208/f0be433e338948d782e957a853122cb9.png
[20200801161016661.png]: /images/20230208/61fc090d9c8640c89205bc488ff7c7a9.png
[20200801161120747.png]: /images/20230208/a13ee6da46c4467c8d6c94c3624cfd01.png
[2020080116113187.png]: /images/20230208/9787e17a84b74c88ae1fe7429de99c17.png
[translateZ_0]: https://segmentfault.com/q/1010000007962353
[CSS_GPU]: https://segmentfault.com/a/1190000008015671
[https_www.runoob.com_cssref_css3-pr-transform.html]: https://www.runoob.com/cssref/css3-pr-transform.html
[http_www.mamicode.com_info-detail-2143598.html]: http://www.mamicode.com/info-detail-2143598.html