按下按鈕會模糊背景，但在過渡時，div 的邊緣過渡效果不佳。除了 Firefox 之外的所有瀏覽器都存在此問題，我該如何修復它？
var btn = document.querySelector('button');
var div = document.querySelector('div');
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;
}
<body> <div class="cube"></div> <button>BLUR BUTTON</button> </body>
P粉1477476372024-04-02 20:07:26
因為圖片填入了<body>，但是.blur在<div>中，只有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;
}