一。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)
三。效果圖
