小程序背景图片设置方法

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

3、利用image标签做到设置背景图片

思路:我们只要利用css中的z-index改变层级既可做到变成背景图的样子

看代码

wxml:

<view class = "login-box" >
   //本地图片
  <image src='../../../static/images/login_bg.png'></image>
</view>

wxss:

page{
 height: 100%;
 width: 100%;
}
.login-box {
  height: 100%;
}
 
image {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  z-index: -999;
}

这样我们也可以做到背景图的效果。

相关推荐:小程序开发教程

以上就是小程序背景图片设置方法的详细内容,更多请关注群英网络其它相关文章!文章来源地址https://www.toymoban.com/news/detail-728309.html

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

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

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

相关文章

  • 前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

    前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

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

    2024年02月22日
    浏览(8)
  • 微信小程序 背景图片设置

    微信小程序 背景图片设置

            微信小程序设置背景图片时,有两种方法:         第一:直接在.wxss中中使用 “background-image:url()” 设置背景图片,但是这种加载背景图片的方法存在一个问题,就是所加载的图片只能是 网络图片 或 base64 图片,是不可以加载本地图片的。 但是使用base64图片

    2024年02月11日
    浏览(9)
  • 微信小程序背景图片设置

    微信小程序背景图片设置

    问题  :微信小程序通过css:background-image引入背景图片失败 [渲染层网络层错误] pages/wode/wode.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用image/标签 解决方法微信小程序在使用background-image设置背景图时报错:渲染层网络层错误_index.wxss 中的

    2024年02月04日
    浏览(12)
  • QT设置widget背景图片,不影响widget内其他控件背景的方法

    QT设置widget背景图片,不影响widget内其他控件背景的方法

    首先说方法,在给widget或者frame或者其他任何类型的控件添加背景图时,在样式表中加入如下代码,指定某个控件,设置其背景。 如果单纯改变样式表,没有指定控件的话,内部的其他控件背景也会改变。 特别提醒:类名 # 控件名,其中控件名要准确,假如你把widget的名字改

    2024年02月11日
    浏览(70)
  • PPT/PS——设置图片的背景为透明色的方法

    PPT/PS——设置图片的背景为透明色的方法

    将图片放到PPT内,点击图片,点击格式,删除背景 PS小白 扣去背景流程 PS怎么把背景色改成透明色呢?

    2024年02月07日
    浏览(11)
  • 解决uni-app开发小程序时,CSS调用本地图片当背景时不能使用的问题

    解决uni-app开发小程序时,CSS调用本地图片当背景时不能使用的问题

    uniapp官方给出的解释就是小程序不支持本地图片,只支持网络访问或者base64。 当背景图片小于40kb的时候还好,uniapp会自动转为base64格式;但是大于40kb时候就不行了,目前我了解的有三种方式解决: 1.可以通过动态样式“:style”来解决,在标签上如下编写: 接着在data里声明

    2024年02月12日
    浏览(9)
  • css图片背景

    在CSS中设置图片背景是通过 background-image 属性来实现的。以下是一种简单的方法来设置CSS图片背景: 1.准备图片文件:首先,准备你想要作为背景的图片,并确保它已经上传到你的网站或服务器上。 2.在HTML中添加一个元素:在HTML文件中,你可以添加一个元素(例如 div 或者其

    2024年02月14日
    浏览(7)
  • HTML--CSS--图片和背景样式

    HTML--CSS--图片和背景样式

    最基本的应该就是对大小的管理 width:像素值; 宽度 height:像素值; 高度 一样使用 border 进行定义 效果: 图片对齐和文本的对齐是一样的,也是用 text-align 进行,但需要注意不能直接在 img 定义,需要在父元素处定义 属性依然是: left 左对齐 center 居中 right 右对齐 效果: 用法

    2024年01月18日
    浏览(7)
  • vue设置页面背景及背景图片

    vue设置页面背景及背景图片

    本地静态图片  cdn图片 设置背景色 实战-PC web登录页 实战-小程序登录页

    2024年02月12日
    浏览(15)
  • CSS样式背景图片的自适应

    今天在写一个页面的时候,需要用到一个背景图片。 于是我把背景图片放到static(静态文件夹)里面,于是在css样式中引入,但是背景图片又太大,最后的样式就是比例失调。但是由于太久没有用到这个属性了,无可奈何又去找了一番度娘 废话不多说,上代码 1.css图片自适

    2024年02月11日
    浏览(10)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包