写一个微信小程序的样式使用本地背景图片的demo
时间: 2023-08-02 17:05:07 浏览: 124
微信小程序学习用demo:XX周期;添加本地图片,选择日期.zip
好的,下面是一个简单的微信小程序页面,使用本地背景图片作为背景:
1. 在小程序的`/pages`目录下新建一个名为`index`的页面,包含以下内容:
```html
<view class="container">
<view class="header">这是标题</view>
<view class="content">这是内容</view>
</view>
```
2. 在小程序的`/images`目录下添加一张名为`bg.jpg`的背景图片。
3. 在`index.wxss`文件中添加以下样式:
```css
.container {
background-image: url("../../../images/bg.jpg");
background-size: cover;
}
.header {
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 36rpx;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
.content {
padding: 40rpx;
font-size: 28rpx;
color: #333;
}
```
4. 在`index.json`文件中配置页面的标题和导航栏颜色,如下所示:
```json
{
"navigationBarTitleText": "我的页面",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white"
}
```
5. 最后,在微信开发者工具中预览该页面,即可看到使用本地背景图片的微信小程序页面效果。
注意:在样式文件中,需要使用相对路径来引用本地图片,路径的起点是样式文件所在的目录,因此需要使用`../../../`来跳转到根目录,然后再进入`/images`目录。
阅读全文