地面滤镜模糊过渡问题
P粉314915922
P粉314915922 2024-04-01 23:10:22
0
1
402

按下按钮会模糊背景,但在过渡时,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粉314915922
P粉314915922

全部回复(1)
P粉147747637

因为图片填充了<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;        
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!