微信小程序中实现背景图片完全覆盖显示，可以通过设置CSS样式来实现

徊忆羽菲

于 2025-01-20 17:08:46 发布

阅读量712

点赞数 2

分类专栏：微信-小程序文章标签：微信小程序 css 小程序

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/145266113

版权

微信-小程序专栏收录该内容

48 篇文章

订阅专栏

wxml页面代码

<view class="beijing"></view>

wxss样式代码

/* pages/beiJing/beiJing.wxss */
.beijing {
  background-image: url("https://www.qipa250.com/qipa.jpg");
  /* 定位：绝对定位 */
  position: absolute;
  /* 上下左右都定位到0 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 给它足够低的层次 */
  z-index: -100;
  /* 背景颜色为黑色  */
  background-color: #000;
  /* 背景图片大小：铺满 */
  background-size: cover;
  /* 模糊度 */
  filter: blur(3px)
}