CSS高斯模糊顏色是CSS3新增的屬性之一。它可以讓你在網(wǎng)頁中添加高斯模糊效果,使得網(wǎng)頁效果更加柔和。
/* 利用CSS高斯模糊顏色實(shí)現(xiàn)半透明背景 */ .blur-bg { height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); }
上面的代碼中,我們創(chuàng)建了一個(gè)名為“blur-bg”的div元素,并定義了其樣式。由于我們需要將它設(shè)置為半透明背景,我們使用了CSS3的rgba()函數(shù),并將alpha通道值設(shè)為0.5,意味著透明度為50%。接下來,我們使用filter屬性為背景添加高斯模糊效果。該屬性需要指定一個(gè)數(shù)值,表示模糊程度。在我們的例子中,我們將數(shù)值設(shè)置為10px。
需要注意的是,CSS高斯模糊顏色并不是所有瀏覽器都支持的,特別是舊版本的瀏覽器。因此,在使用該屬性時(shí),一定要做好兼容性處理。
上一篇css能賺錢
下一篇css脫離文檔流原理