# BackgroundImage 背景图 V1.2.0+
概述
BackgroundImage 背景图，用于页面或内容块背景图设置。
# 支持平台
目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。
| 安卓系统版本 | 安卓uni-app | 安卓uniapp-x | iOS系统版本 | iOS uniapp | iOS uniapp-x | 小程序 | H5/Web |
|---|---|---|---|---|---|---|---|
| 5.0 | × | ✓ | 9.0 | × | × | × | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiBackgroundImage from "@/components/firstui/fui-background-image/fui-background-image.uvue"
export default {
components:{
fuiBackgroundImage
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 src 属性设置背景图片。
<fui-background-image src="/static/images/demo/bg.jpeg"></fui-background-image>
1
背景色
通过 background 属性设置背景颜色，不设置src属性时可使用。
<fui-background-image background="linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));">
<text class="fui-text">页面内容</text>
</fui-background-image>
1
2
3
2
3
温馨提示
Android 端组件fixed布局时需注意调整页面内容层级，如果内容无法处于背景图组件上方，需设置外层容器样式 position: fixed; 然后设置z-index。
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 标签内显示的自定义内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| src | String | 背景图片地址，不传值可食用背景颜色 | - | - |
| background | String | 背景颜色 | transparent | - |
| zIndex | Number | 层级z-index值 | -1 | - |
| aspectFill | Boolean | 是否等比缩放裁剪，设为false不同设备图片可能发生变形 | true | - |
| absolute | Boolean | 是否absolute布局，设为true则外层容器需设置position为非static值，默认fixed布局 | false | - |
# Events
| 事件名 | 类型 | 说明 | 回调参数 |
|---|---|---|---|
| - | - | - | - |
BackgroundImage 背景图