微信小程序中实现背景图片完全覆盖显示,可以通过设置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)
}
相关推荐
如果你好9 小时前
UniApp 路由导航守卫
前端·微信小程序
im_AMBER9 小时前
告别“玄学”UI:从“删代码碰运气”到“控制 BFC 结界”
前端·css
芳草萋萋鹦鹉洲哦9 小时前
【Tailwind】动画解读:Tailwind CSS Animation Examples
前端·css
大尚来也10 小时前
小程序怎么开发自己的小程序
微信小程序
码云数智-园园10 小时前
小程序开发平台有哪些?小程序第三方开发平台评测对比
微信小程序
说私域10 小时前
流量裂变与数字重塑:基于AI智能名片小程序的短视频全域引流范式研究
人工智能·小程序·流量运营·私域运营
蓝帆傲亦1 天前
支付宝小程序性能暴增秘籍:UniApp项目极限优化全攻略
小程序·uni-app
Mr Xu_1 天前
前端开发中CSS代码的优化与复用:从公共样式提取到CSS变量的最佳实践
前端·css
CHU7290351 天前
淘宝扭蛋机抽盒小程序前端功能解析:解锁趣味抽盒新体验
前端·小程序
Lee川1 天前
CSS盒模型实战:用代码透视 `border-box`与 `content-box`的天壤之别
css