简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

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粉314915922183 hari yang lalu354

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