简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

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粉314915922183 Tage vor349

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