亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Community

Learn

Tools Library

AI Tools

Leisure

English

Ground filter blur transition problem

P粉314915922 2024-04-01 23:10:22

651

Pressing the button will blur the background, but when transitioning, the edge transition of the div does not work well. This problem occurs in all browsers except Firefox, how do I fix it?

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粉314915922

reply all(1)

P粉1477476372024-04-02 20:07:26 1 floor

Because the image fills <body>, but .blurin <div> 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;        
}

Like +0

Add Reply