微信小程序 背景图片设置

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

        微信小程序设置背景图片时,有两种方法:

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

但是使用base64图片也存在弊端,(1) base64 编码后比原图要大;(2)如果把大图片编码到 html / css 中,会造成后者体积明显增加,明显影响网页的打开速度。

       本地图片转换成base64图片(转换网址):base64图片在线转换工具 - 站长工具

微信小程序 背景图片设置

        转换完成之后,复制base64码,添加到.wxss中的背景图片中,如下:

      

background-color:(网络图片地址);
background-color:(base64图片码);

        

        第二:在.wxml中用<image src = "本地图片地址">,然后使用z-index将图片置于底层(z-index 值小的在底层)文章来源地址https://www.toymoban.com/news/detail-511234.html

//.wxml
<view class="container">
  <image src='../image/2.jpg'></image>
  <view class='text'>
     为我设置背景图片
  </view>
</view>
//.wxss
.container{
  width: 100%;
  height: 600rpx;
  margin: 0;
  padding: 0;
  position: relative;
}
image{
  position: absolute;
  width: 100%;
  height: 600rpx;
}
.text{
  position: absolute;
  z-index: 1;
}

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

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

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

相关文章

  • 微信小程序中背景图片如何占满整个屏幕,拉伸

    不变形 1. 在页面的wxss文件中,设置背景图片的样式: 2. 在页面的json文件中,设置背景图片的样式:

    2024年02月14日
    浏览(113)
  • 微信小程序:使用image标签做背景图片并铺满屏幕

     wxml页面 wxss页面 效果:    

    2024年02月03日
    浏览(92)
  • 小程序背景图片设置方法

    3、利用image标签做到设置背景图片 思路:我们只要利用css中的z-index改变层级既可做到变成背景图的样子 看代码 wxml: wxss: 这样我们也可以做到背景图的效果。 相关推荐:小程序开发教程 以上就是小程序背景图片设置方法的详细内容,更多请关注群英网络其它相关文章!

    2024年02月07日
    浏览(61)
  • uniapp开发微信小程序 ,使用本地图片做背景图应该怎么处理

    注意,把获取可用的base64地址的方法放在computed 里面是非常必要的。如果放在methods里面初次进入这个页面时候会报错(除了首页之外)。这里就是跟methods和computed特性有关。

    2024年02月16日
    浏览(61)
  • vue设置页面背景及背景图片

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

    2024年02月12日
    浏览(57)
  • flutter背景图片设置

    1、在配置文件pubspec.yaml中,设置以下代码 2、如果目录中没有assets文件夹,则创建一个文件夹,并且取名为assets,在此文件夹中存放图片资源即可,如果想分文件夹管理,在assets目录下创建文件夹,并且在配置文件pubspec.yaml中加入路径即可 3、图片的使用、在界面文件中,有

    2024年02月04日
    浏览(48)
  • CSS 设置背景图片

    一、基本设置 使用 CSS 可以通过以下属性设置背景图片: background-image : 设置背景图片的 URL。 background-size : 设置背景图片的大小。可以设置为绝对像素值,也可以设置为百分比或 \\\"cover\\\"(填充整个容器)或 \\\"contain\\\"(完整显示图片)。 background-repeat : 设置背景图片是否重复。可

    2024年02月12日
    浏览(48)
  • Eclipse背景图片的设置

    我在网上也查找了很多教程,发现有些小伙伴按照如下路径并不能找到images文件夹:、eclipsepluginsorg.eclipse.ui.themes_1.2.1800.v20220316-1102,以及不知如何设置透明度 下面我用最简单的方式教大家解决这些问题。 首先打开eclipse文件夹按照该路径找到images:(ecil是我自己创建的ecl

    2024年02月05日
    浏览(88)
  • VSCode 如何设置背景图片

     VSCode 设置背景图片 1.打开应用商店,搜索 background ,选择第一个,点击安装。 2. 安装完成后点击设置,点击扩展设置。 3.点击在 settings.json 中编辑。    4.将原代码注释后,加入以下代码。   5. 保存后重启 VSCode 就能看到设置的背景图片啦。 6.最后再点击设置,点击颜色主

    2024年02月06日
    浏览(58)
  • Uniapp设置页面的背景图片

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

    2024年02月08日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包