固定背景固定和位置固定元素的Chrome问题

固定背景固定和位置固定元素的Chrome问题,第1张

固定背景固定和位置固定元素的Chrome问题

在以下位置找到了此解决方案

在我看来,使用:before伪元素是一种聪明的方法。限制固定宽度元素的宽度,但对全角页面效果很好。本质上看起来像这样:

.background_fill {  overflow: hidden;  position: relative;    color: red;}.background_fill:before {  background-color: white;  background: url('http://www.lausanneworldpulse.com/pdfs/brierley_map_0507.jpg') no-repeat center center;  background-size: cover;  z-index: -3;  content: " ";  position: fixed;  will-change: transform;  width: 100%;  height: 100%;}<div >  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div></div>

作为解决这个非常烦人的bug的一种方式,对我来说非常有用。



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5621290.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-15
下一篇 2022-12-15

发表评论

登录后才能评论

评论列表(0条)

保存