uni-app设置页面背景及背景图片

最新推荐文章于 2024-04-22 09:19:44 发布

原创最新推荐文章于 2024-04-22 09:19:44 发布 · 3.3w 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#html5

uniapp 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在前端开发中设置背景，包括设置背景色的样式和使用背景图的方法，帮助开发者理解并实现固定定位、全屏覆盖的背景效果。

部署运行你感兴趣的模型镜像

设置背景

1、设置背景色：

<template>
    <view class="container">  //最外层
          <view class="bg-colore"></view>  //此标签为最外层view标签的第一个子标签
          <view class="content"></view>
    </view> 
</template>

// 以下为 style 区域
.bg-colore{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f4f4f4;
    z-index: -1;
}

2、设置背景图

<template>
    <view class="container"> 
          <image class="bg-img" src="图片路径"></image>
          <view class="content"></view>
    </view> 
</template>

// 以下为 style 区域
.bg-img{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}