Menekan butang mengaburkan latar belakang, tetapi apabila beralih, tepi div tidak beralih dengan baik. Masalah ini berlaku dalam semua penyemak imbas kecuali Firefox, bagaimana saya boleh membetulkannya?
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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Sebab imej diisi
<body>，但是.blur在<div>dan hanya 900x900 piksel.Pembetulan Pantas:
Ubah:
var div = document.querySelector('div');Kepada:
var div = document.body;Atau: Bergerak
background: url(..); background-size: ..到divdan dapatkannya dari sana.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; }