Подскажите, необходимо применить размытие меню.
Использую backdrop-filter, но он не везде работает.
Там где не работает хочу применить вот этот эффект.
Но vscode ругается на свойство
background: -moz-element(#css-source);
Говорит неверное значение -moz-element(#css-source)
Нигде не могу нагуглить по этому свойству.
Вот пример. Подскажите как решить?
popup<div class="burger-menu">
<div id="css-result"></div>
<div class="popup-text">Тут располагаются пункты меню</div>
</div>
<div id="css-source" class="wrapper">
<section class="content">
<h1>Hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum commodi, possimus optio dolorem voluptatibus eligendi doloribus. Modi, assumenda ad maiores alias aut minima aliquam dolor libero animi vero!</p>
</section>
</div>
body {
position: relative;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
}
.content {
width: 60%;
}
#css-result {
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
}
.burger-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10;
background-color: rgba(0, 0, 0, .4);
cursor: move;
overflow: hidden;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
@-moz-document url-prefix() {
#css-result {
background: -moz-element(#css-source);
background-repeat: no-repeat;
background-position-y: 0;
background-attachment: fixed;
filter: blur(3px);
}
#css-result::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
}
}
.popup-text {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
color: white;
z-index: 100;
}
'use strict'
$(document).ready(function(){
$(window).on("scroll", function(){
let top = $(window).scrollTop();
$("#css-result").css('background-position-y', "-" + top + 'px');
});
});
Простой
