问题来源
背景图片的高斯模糊效果已经屡见不鲜了,最典型的也就是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