uniapp如何用图片作为背景,并且模糊化,
时间: 2024-04-29 12:24:21 浏览: 150
背景图片模糊实现
在uniapp中,可以使用以下步骤将图片作为背景并模糊化:
1. 在页面中使用CSS样式将图片作为背景,例如:
```
<style>
.page {
background-image: url('/static/img/bg.jpg');
background-size: cover;
background-position: center;
}
</style>
<template>
<div class="page">
<!-- 页面内容 -->
</div>
</template>
```
2. 使用CSS样式将背景图片模糊化,例如:
```
.page {
filter: blur(10px); /* 模糊半径,数值越大越模糊 */
}
```
注意:CSS的blur滤镜在iOS和Android平台上可能不被支持,所以效果可能存在差异。
阅读全文