專業(yè)做展會網(wǎng)站網(wǎng)絡營銷成功的品牌
笑談
我不知道大家有沒有在夜深人靜的時候感受到孤苦難耐，🐶。于是就去下了一些交友軟件來排遣寂寞。可惜的是，有些交友軟件真不夠意思，連一些漂亮小姐姐的圖片都要進行遮罩，完全不考慮兄弟們的感受,😠。所以今天，我們就一起來看看這些軟件的遮罩是如何做的，🐶。
調研
市場上這些交友軟件比較多，就拿一個我朋友他經(jīng)常玩的一個軟件來研究，叫做《XX之戀》，重申一下，我這里沒有任何打廣告的嫌疑，畢竟是我朋友玩的，🐶。我們接下來看這軟件中遮罩的圖片。
注：我實在沒有在網(wǎng)上找到該軟件這些有遮罩的圖片，所以只好從自己的主頁上截取了下，如果有當事人認為這是自己的話，請速與我聯(lián)系，我會及時刪除的。
正如上面所見，該軟件的遮罩效果還是非常不錯的，為什么說非常不錯呢？個人認為有兩個亮點, 🐶保命。。
- 這個遮罩效果讓我們知道對面是女生。
- 這個遮罩效果也僅僅只能讓我們知道對面是女生。
言歸正傳，這種效果在我們悠久的前端歷史上，有一種專業(yè)名詞 --> 毛玻璃效果
碎碎念：我看了蠻多毛玻璃的技術文章，這個技術大家說都是為了讓能人閱讀的時候更賞心悅目，能用來遮小姐姐也算是很不錯的創(chuàng)新了。🐶
實現(xiàn)
現(xiàn)在我們只需要兩樣東西，一個是小姐姐的圖片，一個是前端的小知識。我都準備好啦。首先我們先介紹知識點。
backdrop-filter屬性
我們看MDN的介紹文檔
可以讓你為一個元素后面區(qū)域添加圖形效果（如模糊或顏色偏移）。因為它適用于元素_背后_的所有元素，為了看到效果，必須使元素或其背景至少部分透明。
backdrop-filter有如下常用屬性(帶了數(shù)值，方便理解)
- 🌟
blur(2px): 對元素背后的背景應用2像素的模糊效果。 brightness(60%): 將元素背景的亮度調整為原始亮度的60%。contrast(40%): 將元素背景的對比度調整為原始對比度的40%。- …等
我們主要使用的便是blur屬性，對背景圖片模糊，達到類似的效果。
我采用的小姐姐圖片如下
思路：使用兩個Class。第一個Class的背景圖片是上面的小姐姐，第二個Class完全覆蓋第一個Class，設置blur為10px即可。如下是代碼。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>毛玻璃效果</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;}/** 這個card作為背景圖 **/.card {width: 200px;height: 280px;background-size: 100% 100%;background-image: url("https://p3.itc.cn/images01/20230414/ed83c0fa214a4512967f38a2f414dbaa.jpeg");background-repeat: no-repeat;border-radius: 3%;}/** 這個card用來覆蓋 **/.inlineCard {width: 100%;height: 100%;backdrop-filter: blur(8px);position: relative;border-radius: 3%;}.text {position: absolute;left: 10px;bottom: 10px;color: white;}</style></head><body><div class="card"><div class="inlineCard"><div class="text"><div>24歲</div><div>小姐姐</div></div></div></div></body>
</html>效果圖如下：
最后，兄弟們的點贊支持是我繼續(xù)創(chuàng)造的動力！