问题来源
背景图片的高斯模糊效果已经屡见不鲜了，最典型的也就是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>
祝大家生活愉快。
