微信小程序中实现背景图片完全覆盖显示,可以通过设置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)
}
相关推荐
ZC跨境爬虫12 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
摇滚侠14 小时前
外边距问题 塌陷问题 HTML CSS
css
W.A委员会15 小时前
CSS中的单位
css·css3·html5
nbwenren16 小时前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码
前端·css·html
云云只是个程序马喽17 小时前
AI漫剧创作系统开发定制指南
人工智能·小程序·php
之歆19 小时前
Day07_CSS盒子模型 · 样式继承 · 用户代理样式
前端·css
爱上好庆祝1 天前
学习js的第五天
前端·css·学习·html·css3·js
EnCi Zheng1 天前
M5-markconv自定义CSS样式指南 [特殊字符]
前端·css·python
前端老石人1 天前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
用户059540174461 天前
把多级缓存一致性验证从手工测试换成 Pytest 参数化,Bug 排查时间缩短 90%
前端·css