一、文字/圖片模糊效果的基礎(chǔ)原理

文字模糊效果通常是通過CSS的filter屬性中的blur函數(shù)來實現(xiàn)的。blur()函數(shù)可以給元素添加一個模糊效果，其參數(shù)表示模糊的強度，單位為像素。

// 使用空格分隔多個濾鏡 filter: none;

// 高斯模糊 filter: blur(4px);

// 線性亮度filter: brightness();

// 對比度filter: contrast();

// 陰影效果filter: drop-shadow();

// 灰度filter: grayscale();

// 色相旋轉(zhuǎn)filter: hue-rotate();

// 反轉(zhuǎn)圖像filter: invert();

// 轉(zhuǎn)換透明度filter: opacity();

// 飽和度filter: saturate();

// 褐色filter: sepia();

// SVG濾鏡filter: url();

一、背景疊加讓文字模糊效果

backdrop-filter

當(dāng)你創(chuàng)造一個元素加上這個屬性后，會使得這個元素后面的區(qū)域添加效果（如模糊或顏色偏移）

對比：

filter 屬性必須要加載圖像上或者背景圖上，而 backdrop-filter 只要是一個元素就可以。

backdrop-filter: blur(2px);

backdrop-filter: brightness(60%);

backdrop-filter: contrast(40%);

backdrop-filter: drop-shadow(4px 4px 10px blue);

backdrop-filter: grayscale(30%);

backdrop-filter: hue-rotate(120deg);

backdrop-filter: invert(70%);

backdrop-filter: opacity(20%);

backdrop-filter: sepia(90%);

backdrop-filter: saturate(80%);

這里要注意的一點是，添加模糊后，實際的大小會超出我們設(shè)置的寬高，因為周圍的毛邊效果，你可以在外面包一層并設(shè)置?overflow: hidden;

注意事項

1、性能影響：文字模糊效果會增加瀏覽器的計算負(fù)擔(dān)，特別是在移動設(shè)備上。因此，在使用文字模糊效果時，要考慮性能影響。

2、兼容性：filter屬性在較舊的瀏覽器中可能不支持，因此在使用該屬性時要注意兼容性問題。

3、過度使用：文字模糊效果雖然美觀，但過度使用會降低頁面的可讀性。因此，在使用文字模糊效果時要注意適度。