uni-app 中使用背景图片

这篇具有很好参考价值的文章主要介绍了uni-app 中使用背景图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uni-app 中使用背景图片
一 : H5 上使用(但是在微信小程序中报错)

background-image: url(../../static/images/bg.png);
background-size: 100% 100%;
background-position: 50% 50%;
background-repeat: no-repeat;

二 : 微信小程序中可以
1,使用网络图片(对不同环境需要不同配置),
2,或者 base64(需要本地转换),
3,或者使用标签(推荐使用)文章来源地址https://www.toymoban.com/news/detail-603706.html

<view class="out">
	<image class="image-bg" src="/static/images/bg.png"/>
	 // ... 
	</view>
</view>
.out {
	position: relative;
	z-index: 0; // 支付宝小程序下背景不生效时,可以加上这个
}

.image-bg {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

到了这里,关于uni-app 中使用背景图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Uniapp设置页面的背景图片

    设置背景有两种 注意一个是全背景设置,一个是在相应的view内设置背景 这是设置大背景 这是在相应的view内设置view块的背景

    2024年02月08日
    浏览(28)
  • 前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

    首先看效果! 比如轮播图时红色,那么背景的底色也是红色,轮播图时黄色,背景的底色也是黄色,这就是根据轮播图的图片切换,而改变背景颜色随轮播图颜色一致 话不多说,直接上代码!非常简单 轮播图代码就不放上去了,直接使用插件 swiper ,选择你喜欢的版本 就可

    2024年02月22日
    浏览(35)
  • 【uni-app】上传图片 uni.chooseImage(),uni.uploadFile()接口使用

    图片上传在实际场景中使用广泛,例如商品图片,汽车图片等等 实现选择单张图片上传,可以删除图片。(预览功能时间原因未研究) Vue2 版本,使用uni-app框架api唤起手机相册等图片源,将图片选中到目标列表,并发送到服务器存储,存储成功得到处理后的图片名称存储到

    2024年02月05日
    浏览(39)
  • uni-app开发小程序使用uni.chooseMedia选择图片,安卓手机无法选择图片

    一、在小程序中,选择图片并上传,是一个很常见的功能; 二、最近在开发中,使用 uni.chooseMedia 来做选择图片功能时,苹果手机是正常的,安卓手机打不开!!!代码如下: 就这点屁代码,苹果手机可以正常打开选择图片的功能,安卓手机没法打开!!! !!!! 我百思

    2024年02月16日
    浏览(32)
  • 微信小程序给图片加水印【使用uni-app】

    选择图片后使用canvas绘制图片,再绘制需要的水印文字,将绘制好的画布转化为图片即可 最终效果

    2024年02月10日
    浏览(37)
  • uni-app修改页面背景色:

    1.设置全局背景色(法一): 2.设置全局背景色(法二): 在App.vue的style样式表中设置 3.设置单页面背景色: 4.在pages.json里面设置单页面背景色,这种是不行的,只能在页面内设置:

    2024年02月15日
    浏览(47)
  • 【微信小程序】不支持使用本地图片设置背景图片解决方法

    在小程序样式文件中,如果设置背景图片的路径用的是本地的,就会报错并且显示不出来;如果在wxml文件中使用图片的本地路径作为背景图,则微信开发者工具中可以显示出来,但是运行到手机上显示不出来,解决方法如下: 方法一: 使用网络图片 方法二: 在线搜索图片

    2024年02月11日
    浏览(63)
  • RN 设置背景图片(使用ImageBackground组件)

     在RN版本0.46版本的时候添加了ImageBackground控件。ImageBackground可以设置背景图片,使用方法和image一样,里面嵌套了其他的组件     参考链接: https://www.reactnative.cn/docs/imagebackground https://chat.xutongbao.top/ 

    2024年02月15日
    浏览(28)
  • uni-app 头部导航条改为背景图

    将某一页面的导航条,改为背景图 1.在pages.json文件中将要修改的页面,style中的“navigationStyle”设置为custom,取消默认的原生导航栏 2.在要修改的页面中如index1页面 效果如图   苹果手机导航条文字在中间位置,安卓手机导航条问题在靠左位置,更改某一页面,将会与其他页

    2024年02月11日
    浏览(40)
  • uni-app小程序设置页面背景色

    在原生微信小程序中,可以通过下面的设置来设置页面背景色 但是在uni-app上,这样的设置在小程序端并没有起作用。 原因是因为style标签上加了scoped,那么如何在使用scoped的同时又能设置page背景色呢? 解决方案:

    2024年02月15日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包