当前位置:澳门贵宾厅 > Web > 实现背景图显示,发现在wxss里面设置 background-image
实现背景图显示,发现在wxss里面设置 background-image
2020-02-07

时间: 2018-08-08阅读: 5139标签: 背景

  这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示。经过查资料发现,background-image 只能用网络url或者base64图片编码 , 本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。

在小程序开发的时候,设置页面的背景,css代码如下:

手机版澳门贵宾厅www.vip8888.com,  下面通过 image 标签src属性设置,实现背景图显示

.page__bd{ width: 100%; height: 220px; background: url('../img/images.jpg') no-repeat; background-size: 100% 100%;}

  界面结构:

或者换成行内来实现,在调试工具上都是可以显示的,但是扫面上传到手机上却显示不出来,这是为什么呢?

<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>

这是由于:background-image 只能用网络url或者base64图片编码, 本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。

  wxss样式:

下面通过 image 标签src属性设置,实现背景图显示

.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;
}

界面结构:

  显示结果:

view class='set-background' image class='background-image' src='{{item.countryPic}}'/image view class='background-content' view background-size="cover" image src="{{item.picture}}"/image /view /view/view

www.vip8888.com 1,别骂我,我是德棍!

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;}
下一篇:没有了