搜尋

首頁  >  問答  >  主體

地面濾鏡模糊過渡問題

按下按鈕會模糊背景,但在過渡時,div 的邊緣過渡效果不佳。除了 Firefox 之外的所有瀏覽器都存在此問題,我該如何修復它?

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 天前425

全部回覆(1)我來回復

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

    回覆
    0
  • 取消回覆