美文网首页小程序
小程序 设置背景图

小程序 设置背景图

作者: 崠崠 | 来源:发表于2018-09-10 19:15 被阅读0次

    wxss文件中,使用background-image: url();设置背景图,报错,提示
    pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签
    小程序中设置区域背景图,对于在wxss文件中,存在本地资源无法获取的问题。解决方案在错误提示中也给出来了

    1、网络图片

    使用背景图片的时候,采用网络图片

    background-image: url(https://xxx/xxx.pmg);
    

    2、base64

    base64编码,在这个网站进行转换,转换之后的得到的字符串放入url中。格式:

    background-image: url(转换之后的base64字符串);
    

    多次使用的话,可以设置全局变量,在js文件中进行引用


    3、<image/>标签

    利用流布局,设置z-index层级,将<image/>标签置于底层

    具体代码如下:

    .wxss文件


    /* 头部 */
    .header-container {
      display: flex;
      flex-direction: row;
      height: 200rpx;
      background-color: #fff;
      align-items: center;
      position: relative;
      background-image: url(../../image/me/myinfo_bg.png);
    }
    
    .header-bg{
      width: 100%;
      height: 100%;
    }
    
    /* 名称和头像 */
    .userContent{
      position: absolute;
      z-index: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    
    .header-avatar {
      background-color: #fff;
      width: 90rpx;
      height: 90rpx;
      margin: 0 20rpx;
      border-radius: 50%;
    }
    
    .header-nickname {
      color: #fff;
      font-size: 30rpx;
    }
    
    /* 帐号管理和信息 */
    .header-userInfo{
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 120rpx;
      margin-left: auto;/*靠右*/
    }
    

    .wxml 文件


       <view class="header-container">
          <image class='header-bg' src = '../../image/me/myinfo_bg.png'></image>
          <view class='userContent'>
            <image bindtap='changePhotoImg' class="header-avatar" src="{{userInfo.headUrl}}" ></image>
            <text class="header-nickname">姓名</text>
            <view class='header-userInfo'>
              <image></image>
              <text class='header-centertext'>帐号管理 ></text>
            </view>
          </view>
        </view>
    
    效果图

    相关文章

      网友评论

        本文标题:小程序 设置背景图

        本文链接:https://www.haomeiwen.com/subject/mkhegftx.html