suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Problem mit dem unscharfen Übergang des Bodenfilters

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>

P粉314915922P粉314915922232 Tage vor427

Antworte allen(1)Ich werde antworten

  • P粉147747637

    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;        
}

    Antwort
    0
  • StornierenAntwort