CSS背景图片高斯模糊效果

问题来源

背景图片的高斯模糊效果已经屡见不鲜了，最典型的也就是QQ音乐的播放器页面，看起来有种回忆过去的感觉。CSS如何实现这种效果呢？其实也很简单，利用CSSfilter属性就能实现，下面是在uniapp中的演示效果。

示例效果

<template>
    <view class="page-conatiner">
		<view class="card">
			<view class="content">
				<image :src="url" mode="widthFix"></image>
				<view>前端其实很浪漫</view>
			</view>
			<view class="bg-image">
				<image :src="url"></image>
			</view>
			<view class="bg-gray"></view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                url: 'https://picsum.photos/300/300'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-conatiner {
		.card {
			position: relative;
			height: 300rpx;
			width: 100%;
			z-index: 2;
			overflow: hidden;
			.content {
				width: 100%;
				height: 100%;
				position: absolute;
				color: #fff;
				top: 0;
				display: flex;
				padding: 30rpx;
				font-weight: bold;
				font-size: 36rpx;
				image {
					height: 100%;
					width: 200rpx;
					vertical-align: middle;
					padding-right: 20rpx;
				}
			}
			.bg-image {
			    position: absolute;
			    width: 100%;
				height: 300rpx;
			    top: 0;
			    z-index: -1;
			    filter: blur(20rpx) brightness(70%); // 模糊半径和变暗
			    transform: scale(1.2); // 控制边缘是否模糊，小于1的话边缘会模糊
				image {
					height: 100%;
					width: 100%;
					vertical-align: middle;
				}
			}
			.bg-gray { // 相当于加了一层遮罩
			    position: absolute;
			    height: 100%;
			    width: 100%;
			    top: 0;
			    background: rgba(0, 0, 0, .1);
			    z-index: -1;
			    opacity: 0.5;
			}
		}
		
	}
</style>

祝大家生活愉快。