地面濾鏡模糊過渡問題

Question

按下按鈕會模糊背景，但在過渡時，div的邊緣過渡效果不佳。除了Firefox之外的所有瀏覽器都存在此問題，我該如何修復它？ varbtn=document.querySelector('button');vardiv=document.querySelector('div');btn.addEventListener('click',function(){div.classList.toggle('

P粉147747637 · Answer

因為圖片填入了，但是.blur在

中，只有900x900像素。

快速修復：

更改：var div = document.querySelector('div');

#至：var div = document.body;

#或：移動 background: url(..); background-size: .. 到 div 並從那裡取得它。

var btn = document.querySelector('button');
var div = document.body;
            
btn.addEventListener('click', function() {              
    div.classList.toggle('blur');           
});

body {
    margin: 0;
    background: url('https://images.pexels.com/photos/2763927/pexels-photo-2763927.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')no-repeat;
    background-size: cover;
}

div {
    width: 900px;
    height: 900px;
    transition: 1s ease;    
}

.blur {
    backdrop-filter: blur(20px);
    transition: 1s ease;        
}

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學