CSS+Filter模糊是一種可以使網頁元素產生模糊效果的技術。
.blur{ filter: blur(5px); }
上述代碼中,使用了filter的blur函數,將模糊半徑設為5像素。
需要注意的是,該屬性并非所有瀏覽器都支持,如果需要在所有瀏覽器中實現該效果,可以結合使用Webkit和Moz的前綴:
.blur{ -webkit-filter: blur(5px); /* Safari 和 Chrome */ -moz-filter: blur(5px); /* Firefox */ filter: blur(5px); }
此外,還可以使用其他的濾鏡屬性,如hue-rotate(色相旋轉)、brightness(亮度)和saturate(飽和度)等。
需要注意的是,使用濾鏡會增加頁面的渲染負擔,因此在使用時需要注意性能問題。