Ground filter blur transition problem

Question

Pressing the button blurs the background, but when transitioning, the edges of the div don't transition well. This problem exists in all browsers except Firefox, how can I fix it? varbtn=document.querySelector('button');vardiv=document.querySelector('div');btn.addEventListener('click',function(){div.classList.toggle('

P粉147747637 · Answer

Because the image fills , but .blurin

is only 900x900 pixels.

Quick Fix:

Change: var div = document.querySelector('div');

To:var div = document.body;

Or: move background: url(..); background-size: .. to div and get it from there.

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, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial