微信小程序 - 背景图片

最新推荐文章于 2024-04-01 17:24:48 发布

iamlyky

最新推荐文章于 2024-04-01 17:24:48 发布

阅读量718

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/iamlyky/article/details/84830859

版权

微信小程序专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中设置背景图片，包括选择合适的图片格式、尺寸调整、背景铺满及固定等技巧，帮助开发者实现理想的页面背景展示效果。

摘要由CSDN通过智能技术生成

微信小程序 - 背景图片

Page({
    data: {
        width: 0,
        height: 0,
        src: '../../../dist/images/image-background.jpg'
    },
    onLoad: function onLoad(options) {
        var _this = this;
        wx.getSystemInfo({
            success: function success(res) {
                _this.setData({
                    width: res.windowWidth,
                    height: res.windowHeight
                });
            }
        });
    },
    login: function login() {
        wx.navigateTo({
            url: '../login/login'
        });
    },
    register: function register() {
        wx.navigateTo({
            url: '../register/register'
        });
    }
});

<view style="width: {{width}}px; height: {{height}}px; background-image: url({{src}})">
    <view>
        <view style="text-align: center;padding-top:300rpx;color:white">生命，只是一场唯有一次的真实梦境。</view>
        <view style="text-align: center;padding-top:30rpx;color:white"> 新的阳光里，香樟哭了，</view>
        <view style="text-align: center;padding-top:30rpx;padding-bottom:100rpx;color:white">那些忧伤化作清晨的雾被蒸干了。 </view>
    </view>
 
    <view style="margin:20px;">
        <button type="warn" bindtap="register">注册</button>
    </view>
 
    <view style="margin:20px">
        <button type="primary" bindtap="login">登录</button>
    </view>
</view>

效果如图：