css高斯模糊背景，使用filter！
一。html代码
<div class=”information “>
<div class=”information_blur” :style=”{\’background\’: `url(${backgroundUrl})`}”></div> // 模糊背景图片必须和内容平级，不然内容内的字体也会模糊
// 背景内的内容
<div class=”information_head “>
<img class=”head_portrait” @click=”openDialog” src=”~@/assets/img/photo9.jpg”>
<div class=”head_portrait_notice”>
<p @click=”openDialog”>海派星派大星 <span>A+</span></p>
<div class=”notice”>五根松咪哒表演系官方圈子，欢迎热爱唱歌的小姐姐加入</div>
</div>
</div>
<div class=”fans”>
<div class=”center”>
<span class=”number”>9999</span>
<span class=”text”>圈友</span>
</div>
<div class=”center” >
<span class=”number1″>12w</span>
<span class=”text1″>粉丝</span>
</div>
<div class=”center” >
<span class=”number2″>1669</span>
<span class=”text2″>活跃值</span>
</div>
<div class=”center”>
<span class=”number3″>231</span>
<span class=”text3″>动态</span>
</div>
</div>
</div>
二。css 代码
.information
display: flex
flex-direction: column
width: 7.44rem
height:3.20rem
margin-top: 1.11rem
border: 1px solid #fff
.information_blur
width: 7.44rem
height:3.20rem
background-size: cover
background-position: center
position: absolute
filter: blur(10px) //模糊度自己设置
.information_head
display: flex
flex-direction: row
height: 1.48rem
margin-top: 0.43rem
position: relative
.head_portrait
border-radius:0.15rem
margin-left: 0.32rem
width: 1.48rem
height: 1.48rem
.head_portrait_notice
display: flex
flex-direction: column
margin-left: 0.15rem
margin-top: 0.25rem
p
height:0.34rem
font-size:0.36rem
font-family:PingFang-SC-Medium
font-weight:500
color:rgba(51,51,51,1)
line-height:0.47rem
span
display: inline
margin-left: 0.15rem
width:0.57rem
height:0.22rem
font-size:0.3rem
font-family:PingFang-SC-Medium
font-weight:500
color:rgba(245,126,73,1)
line-height:0.48rem
.notice
width:4.98rem
margin-top: 0.15rem
font-size:0.24rem
font-family:PingFang-SC-Medium
font-weight:500
color:rgba(102,102,102,1)
overflow:hidden
display: -webkit-box
-webkit-line-clamp: 2
-webkit-box-orient: vertical
.fans
display: flex
justify-content: space-around
width: 7.43rem
height: 0.7rem
margin-top: 0.25rem
position: relative
.center
text-align: center
width: 0.8rem
height: 0.7rem
.number
width:0.7rem
font-size:0.32rem
font-family:PingFang-SC-Medium
color:rgba(51,51,51,1)
.text
position: relative
margin-left:0.1rem
width:0.6rem
height:0.23rem
font-size:0.24rem
font-family:PingFang-SC-Medium
color:rgba(153,153,153,1)
.number1
width:0.74rem
font-size:0.32rem
font-family:PingFang-SC-Medium
font-weight:500
color:rgba(51,51,51,1)
.text1
position: relative
margin-left:0.1rem
width:0.6rem
height:0.23rem
font-size:0.24rem
font-family:PingFang-SC-Medium
color:rgba(153,153,153,1)
.number2
width:0.74rem
font-size:0.32rem
font-family:PingFang-SC-Medium
font-weight:500
color:rgba(51,51,51,1)
.text2
position: relative
margin-left: -0.05rem
width:0.9rem
height:0.23rem
font-size:0.24rem
font-family:PingFang-SC-Medium
color:rgba(153,153,153,1)
.number3
width:0.74rem
font-size:0.32rem
font-family:PingFang-SC-Medium
font-weight:500
color:rgba(51,51,51,1)
.text3
position: relative
margin-left:0.1rem
width:0.6rem
height:0.23rem
font-size:0.24rem
font-family:PingFang-SC-Medium
color:rgba(153,153,153,1)
三。效果图
版权声明：本文为shink原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。