【小程序】设置背景图

北海南风

已于 2024-12-03 15:44:02 修改

阅读量1.2k

点赞数

分类专栏： # 小程序前端开发文章标签：小程序前端

于 2021-05-14 15:14:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46157208/article/details/116792615

版权

前端开发同时被 2 个专栏收录

19 篇文章

订阅专栏

小程序

13 篇文章

订阅专栏

这篇博客介绍了如何在微信小程序中设置背景图片，使用绝对定位填充整个视图，并通过CSS实现背景图片的模糊效果。代码示例中展示了.wxml和.wxss的用法，包括设置背景图片URL、背景颜色、大小、层次以及应用模糊滤镜。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序的背景图片，效果如下：
在这里插入图片描述
.wxml代码：

<view class="bj"></view>

.wxss代码：

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