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

wxml页面代码

javascript 复制代码
<view class="beijing"></view>

wxss样式代码

javascript 复制代码
/* 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)
}
相关推荐
moxiaoran57533 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
chaosama11 小时前
微信小程序带参分享、链接功能
微信小程序·小程序
胡西风_foxww11 小时前
微信小程序动态组件加载的应用场景与实现方式
微信小程序·应用·加载·动态组件
要加油哦~12 小时前
css | class中 ‘.‘ 和 ‘:‘ 的使用 | 如,何时用 &.is-selected{ ... } 何时用 &:hover{...}?
前端·css
ALLSectorSorft14 小时前
上门服务小程序会员系统框架设计
小程序·apache
甜甜的资料库16 小时前
基于小程序老人监护管理系统源码数据库文档
微信小程序
空&白16 小时前
css元素的after制作斜向的删除线
前端·css
奇舞精选17 小时前
你可能不知道但非常实用的 HTML5 元素
css
Jolyne_18 小时前
grid 实现完美的水平铺满、间隔一致的自适应布局
前端·css
西洼工作室18 小时前
【解决导航栏字体图标渲染导致文本闪烁问题】采用腾讯视频的解决方案
前端·css·css3