解決css3毛玻璃效果 blur 有白邊問題

做乙個登入頁，全屏背景圖毛玻璃效果，實現方法如下：

html：

css：

.login-wrap

.login-mask

.login-box

效果如下：

可以發現邊上是有白邊的，這是一種blur的值很大的情況下。此時的解決方法是直接將background-size:cover;改成background-size:150% 150%;就行了。效果圖如下：

仔細看可以發現白邊不那麼明顯了。

另外一種就是在blur的值比較小的情況下，比如將上述的blur值改成20，效果如下：

可以看出白邊很明顯，這時候如果給body新增同樣的背景圖的話，白邊就會消失：

body

效果圖如下：

可以看到邊緣的區別很明顯。但是對比有點明顯，效果並不好，將blur的值再改小一點，改成5,，效果圖如下：

邊緣的白邊去掉了，並且看起來不是那麼違和了。

如果你覺得按照第乙個方法做出來的效果背景太亮的話，可以使用濾鏡來變暗一點：

background-color: rgba(141, 141, 141, 0.35);

background-blend-mode: darken;

效果如下：

解決css3毛玻璃效果 blur 有白邊問題

做乙個登入頁，全屏背景圖毛玻璃效果，實現方法如下 html css login wrap login mask login box 效果如下 可以發現邊上是有白邊的，這是一種blur的值很大的情況下。此時的解決方法是直接將background size cover 改成background size...

css毛玻璃效果白邊 css3毛玻璃效果白邊問題

1 毛玻璃實現方法 css3 blur濾鏡實現 如下測試 blur webkit filter blur 10px chrome,opera moz filter blur 10px ms filter blur 10px filter blur 10px 需要注意目前火狐不支援，其他些瀏覽器，如f...

css3毛玻璃模糊效果

css3 blur濾鏡實現 如下測試 需要注意目前火狐不支援，其他些瀏覽器，如firefox到目前還沒有支援css3 filter.當然，要實現 比方說 firefox 24瀏覽器上 變模糊的效果，也是可以的。可以使用svg的模糊濾鏡。新建文命名為blur.svg的svg檔案 xml version...