CSS背景图片高斯模糊效果

CSS背景图片高斯模糊效果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>

祝大家生活愉快。

今天的文章CSS背景图片高斯模糊效果分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/9506.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注