cari

Rumah  >  Soal Jawab  >  teks badan

Masalah peralihan kabur penapis tanah

Menekan butang mengaburkan latar belakang, tetapi apabila beralih, tepi div tidak beralih dengan baik. Masalah ini berlaku dalam semua penyemak imbas kecuali Firefox, bagaimana saya boleh membetulkannya? 

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粉314915922294 hari yang lalu494

membalas semua(1)saya akan balas

  • P粉147747637

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

    Sebab imej diisi <body>，但是.blur在<div> dan hanya 900x900 piksel.

    Pembetulan Pantas:

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

    Kepada: var div = document.body;

    Atau: Bergerak background: url(..); background-size: .. 到 div dan dapatkannya dari sana. 

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

    balas
    0
  • Batalbalas