Durch Drücken der Taste wird der Hintergrund unscharf, aber beim Übergang werden die Kanten des Div nicht gut überblendet. Dieses Problem tritt in allen Browsern außer Firefox auf. Wie kann ich es beheben?
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>
因为图片填充了
<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; }