微信小程序开发背景图显示功能

2026-08-01 12:06:32

这两天开发微信小程序，在设置背景图片时，发现在wxss里面设置 background-image:(url) 属性，不管是开发工具还是线上都无法显示。经过查资料发现，background-image 只能用网络url或者base64图片编码，本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。

　　下面通过 image 标签src属性设置，实现背景图显示

　　界面结构：

<view class='set-background'>
  <image class='background-image' src='{{item.countryPic}}'></image>
  <view class='background-content'>
    <view class="set-background-avatar" background-size="cover">
      <image class="post-specific-image" src="{{item.picture}}"></image>
    </view>
  </view>
</view>

　　wxss样式：

.set-background {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
}
.set-background-avatar {
  width: 220px;
  height: 150px;
}
.background-content {
  position: absolute;
  z-index: 1;
}
.background-image {
  width: 225px;
  height: 150px;
  opacity: 0.8;
}
.post-specific-image {
  width: 215px;
  height: 150px;
  vertical-align: middle;
}

　　显示结果：

总结

以上所述是小编给大家介绍的微信小程序开发背景图显示功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序图片绝对定位(背景图片)

微信小程序图片绝对定位前言: 在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满.使用背景图片的话,一般使用一些新的view层,如<image class="jxlogo" src="../../image/jx.png"/>等,但是小程序与html类似,一个不同的 css或wxss会占据一个位置,然后接下来的
微信小程序开发背景图显示功能

这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image 只能用网络url或者base64图片编码 , 本地图片只能用 image标签src属性才行.当然 image标签src属性也可以使用网络url或者base64图片编码. 下面通过 image 标签src属性设置,实现背景图显示界面结构: <view class='set-background'>
微信小程序开发常用功能汇总

目录获取用户信息获取手机号添加分享功能静态分享带参分享全局分享分享按钮页面跳转自定义组件定义全局组件设置默认顶部导航栏样式取消顶部默认的导航栏获取用户信息调用 wx.getUserProfile 方法获取用户基本信息.页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo 具体参数如下: 属性类型默认值必填说明 lang string en 否显示用户信息的语言 desc s
微信小程序开发环境搭建详细介绍

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图开发工具下载是看到GitHub上的分享.那么你可以直接
详解微信小程序开发用户授权登陆

本篇将帮助读者实现基于微信开发者工具 & C#环境下的用户在小程序上的授权登陆. 准备: 微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/index.html 开发: 在开发之初,我们需要先明确微信方已经制定好的授权登陆流程,参看官方API - 登陆接口.
微信小程序实现多图上传

本文实例为大家分享了微信小程序实现多图上传的具体代码,供大家参考,具体内容如下前言纯属是笔记,复用性太高,前后端封装的上传的多图方法看一下效果图 index.html <view class="imgs"> <block wx:for="{{ imgs }}" wx:key="{{ index }}"> <view class="img-box"> <image src=&quo
Echarts在Taro微信小程序开发中的踩坑记录

背景近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小由于笔者对e
微信小程序轮播图swiper代码详解

微信小程序自定义swiper 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 先在index.wxml中写 style="background:{{item}}" 报错不要管,不影响页面布局 <view class="container"> <swiper class="swiper1" indicator-dots="{{indicatorDots}}" 是否显示面板指示点
微信小程序开发工具介绍

目录官方文档一.微信开发工具深入介绍下载开发工具 1.1 大体介绍开发工具主要分四大块 1.2 工具栏 1.3编辑器 1.4调试器编辑器总结官方文档 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 一.微信开发工具深入介绍在讲编辑器之前,我要强调一下,这个一点都不难,自己点一点就知道每个按钮代表什么意思.我把介绍我们开发中经常用的点,就可以了下载开发工具工具介绍微信官方链接 1.1 大
微信小程序开发之全局配置与页面配置实现

目录一.全局配置 (1)小程序窗口的组成部分 (2)导航栏 navigationBar (3)下拉刷新页面 (4)上拉触底的距离 (5)底部导航栏 tabBar (6)图标的获取二.页面配置 (1)概念 (2)页面配置与全局配置的关系 (3)常用配置项三.综合案例一.全局配置 app.json文件就是项目的全局配置文件 (1)小程序窗口的组成部分 (2)导航栏 navigationBar 1)window节点常用配置项 2)设置导航栏设置导航栏标题文字 app.json-->win
微信小程序开发之实现一个跑步小程序

目录地图组件当前位置开始跑步按钮 GPS定位设置前后台允许获取定位开启前后台定位绘制路线自己动手实现一个跑步小程序用到的方法:wx.onLocationChange,监听实时地理位置变化事件,需结合 wx.startLocationUpdateBackground,wx.startLocationUpdate使用. 地图组件定义一个全屏的地图,地图配置项经纬度(longitude,latitude),缩放(scale),标记点(markers),路线(polyline)等 <v

微信小程序开发背景图显示功能

相关推荐

随机推荐