毛玻璃去白边

背景毛玻璃效果

1
2
3
4
5
6
7
<template>
	<view class="list">
		<view class="fixbg">
			
		</view>
	</view>
</template>

全局样式添加(APP.vue)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	.container{
		width: 100%;
		height: calc(100vh - 70px);
		overflow: hidden;
	}
	.container scroll-view{
		height: 100%;
	}
    /* 毛玻璃效果其实是 背景模糊用filter的blur 然后加上transform 做一个缩放，如果不加transform会出现白边*/
	.fixbg{
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-image: url(static/wangyiyunyinyue.png);
		background-size: cover;
		background-position: center 0;
		filter: blur(10px);
		transform: scale(1.2);
	}
</style>