按下按鈕會模糊背景,但在過渡時,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粉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; }