毛玻璃效果

 

<template>
	<view>
		
		<view class='container'>
			<view class='frosted-glass'></view>
		</view>
			
	</view>
</template>
<script>
	
	export default {
		
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
<style lang="scss">
	
	 .container{
		width: 100%;height: 300px;
		position: relative;
		background-image: url('base64');
		// background-image: url('~@/static/workplatform/maoboli_bg2.jpg');
		background-position: center top;
		background-size: cover;
	}

	.frosted-glass{
		width: 100%;height: 70%;
		background: inherit;
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-ms-filter: blur(5px);
		-o-filter: blur(5px);
		filter: blur(10px); //此处可以修改模糊度
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
		box-shadow: 0 1px 1px white;
	}
	
	
</style>