Problème de transition de flou du filtre au sol

Question

Appuyer sur le bouton rend l'arrière-plan flou, mais lors de la transition, les bords du div ne font pas bien la transition. Ce problème existe dans tous les navigateurs sauf Firefox, comment puis-je le résoudre ? varbtn=document.querySelector('button');vardiv=document.querySelector('div');btn.addEventListener('click',function(){div.classList.toggle('

P粉147747637 · Answer

Parce que l'image est remplie ，但是.blur在

et ne fait que 900x900 pixels.

Correction rapide :

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

À : var div = document.body;

Ou : Déplacez background: url(..); background-size: .. 到 div et récupérez-le à partir de là.

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, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket