css3 - uniapp小程序中背景图被拉伸问题如何解决?

Question

.main{
  height: auto;
  background-size: 100% 100%;
  background-attachment: fixed;
  padding-bottom: 80px;
  background-image:url("xxxxx.png")
}

安卓下目前看没问题 但是在ios下 就上下拉伸 div内部的内容长度是动态长度

求教要怎么在小程序中兼容ios 安卓的展示 图片不变形

Answer 1

一般background-size是不会用100% 100%;的。因为如果你设置的宽高，跟图片的宽高不成比例的话，background-size:100% 100%会不按图片原比例铺满，因此导致变形。

背景图，一般用background-size: cover;background-position: center center，在容器居中铺满。background-size: cover会根据图片自身比例，铺满容器，因此它一定不会出现变形的情况，只是可能背景会有裁剪的情况。

所以建议你让UI出的图，保证主体内容放在正中间，这样裁剪直接裁剪到上下，但是中间主体部分没事。

Answer 2

把背景图放在滚动容器上，而不是内部的滚容区域上面。
这样就不需要使用 background-attachment: fixed 属性了。

比如说你的DOM结构是这样的

<div class="layout">
  <div class="main">
    <div class="alert-item"></div>
  </div>
</div>

那么就给 layuout 设置 height:100vh 或者 height:100%，然后设置超出滚动 overflow: auto，这样滚动容器的高度就固定了。
然后就是设置背景图了。

.layout {
   height: 100vh;
   background: url("xxxxx.png") center/cover no-repeat;
   overflow: auto;
}

Answer 3

.main{
  height: 100vh;
  background-size: cover; // 或者 `contain`，取决于你的需要
  background-attachment: fixed;
  background-position: center; // 让图片在元素中间显示
  background-repeat: repeat; // 让图片重复
  padding-bottom: 80px;
  background-image:url("xxxxx.png")
}