zoukankan      html  css  js  c++  java
  • 微信小程序开发--背景图显示

      这两天开发微信小程序,在设置背景图片时,发现在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;
    }

      显示结果:

    ,别骂我,我是德棍!

  • 相关阅读:
    HDU 3835 R(N)
    HDU 2498 Digits
    HUST 1027 Enemy Target!
    【POJ 3714】 Raid
    【POJ 2965】 The Pilots Brothers' refrigerator
    【POJ 2054】 Color a Tree
    【POJ 1328】 Radar Installation
    【POJ 3190】 Stall Reservations
    【POJ 3614】 Sunscreen
    【BZOJ 3032】 七夕祭
  • 原文地址:https://www.cnblogs.com/donghuang/p/9438562.html
Copyright © 2011-2022 走看看