css高斯模糊背景,使用filter!

一。html代码

 
// 模糊背景图片必须和内容平级,不然内容内的字体也会模糊
  // 背景内的内容
 
   
   
     

海派星派大星 A+

     
五根松咪哒表演系官方圈子,欢迎热爱唱歌的小姐姐加入
   
 
 
     
        9999
        圈友
     
     
        12w
        粉丝
     
     
        1669
        活跃值
     
     
        231
       动态
     
   
二。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)
三。效果图
css高斯模糊背景,使用filter!_第1张图片

 

转载于:https://www.cnblogs.com/shink/p/11050121.html

你可能感兴趣的:(css高斯模糊背景,使用filter!)