微信小程序中实现背景图片完全覆盖显示,可以通过设置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)
}
相关推荐
每天开心18 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
说私域30 分钟前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
sophister1 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
MiyueFE2 小时前
CSS 函数与混入草案:原生 CSS 的“魔法”即将登场!
前端·css
一渊之隔3 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
呆呆的心5 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
爱学习的小学渣5 小时前
Css: flex布局+趣味Demo
css
wuxuanok5 小时前
Web前端开发-HTML、CSS
前端·css·html
racerun7 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序