CSS-фоновый пятно эффект размытия не виден, несмотря на правильное позиционирование и z-индекс ⇐ CSS

[Anonymous]

Я пытаюсь реализовать прогрессивный эффект размытия в нижней части моей веб-страницы с использованием фонефильтра , но он совершенно невидим, несмотря на то, что имеет правильную структуру HTML, свойства CSS и высокие значения Z-Index. class = "Snippet">

Код: Выделить всё

// Check backdrop-filter support
const supported = CSS.supports('backdrop-filter', 'blur(1px)') || CSS.supports('-webkit-backdrop-filter', 'blur(1px)');
document.getElementById('support').textContent = supported ? 'OUI' : 'NON';

// Toggle background pour tester
function toggleBackground() {
const wrap = document.querySelector('.progressive-blur_wrap');
if (wrap.style.backgroundColor === 'rgba(255, 0, 0, 0.1)') {
wrap.style.backgroundColor = '';
} else {
wrap.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
}
}

// Toggle overflow pour tester
function toggleOverflow() {
const wrap = document.querySelector('.progressive-blur_wrap');
if (wrap.style.overflow === 'visible') {
wrap.style.overflow = 'clip';
} else {
wrap.style.overflow = 'visible';
}
}< /code>
body {
margin: 0;
padding: 0;
height: 200vh; /* Pour permettre le scroll */
background: linear-gradient(to bottom, #ff0000, #00ff00, #0000ff);
position: relative;
}

/* Test content pour voir le blur */
.test-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: white;
text-align: center;
font-size: 24px;
font-weight: bold;
}

/* Progressive Blur Effect */
.progressive-blur_wrap {
z-index: 99;
pointer-events: none;
width: 100%;
height: 6rem;
position: fixed;
inset: auto 0% 0%;
overflow: clip;
transform: rotate(180deg);
/* Test avec fond rouge semi-transparent pour voir si l'élément est visible */
/* background: rgba(255, 0, 0, 0.1);  */
}

.progressive-blur_panel {
-webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
width: 100%;
height: 100%;
padding: 0;
position: absolute;
-webkit-mask: linear-gradient(#0000 10%, #000 20% 40%, #0000 50%);
mask: linear-gradient(#0000 10%, #000 20% 40%, #0000 50%);
}

.progressive-blur_panel.is-1 {
-webkit-backdrop-filter: blur(var(--blur));
backdrop-filter: blur(var(--blur));
-webkit-mask: linear-gradient(#000 0% 10%, #0000 30%);
mask: linear-gradient(#000 0% 10%, #0000 30%);
}

.progressive-blur_panel.is-2 {
-webkit-backdrop-filter: blur(calc(var(--blur) / var(--ratio)));
backdrop-filter: blur(calc(var(--blur) / var(--ratio)));
-webkit-mask: linear-gradient(#0000 0%, #000 10% 20%, #0000 40%);
mask: linear-gradient(#0000 0%, #000 10% 20%, #0000 40%);
}

.progressive-blur_panel.is-3 {
-webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio))));
backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio))));
-webkit-mask: linear-gradient(#0000 0%, #000 20% 30%, #0000 50%);
mask: linear-gradient(#0000 0%, #000 20% 30%, #0000 50%);
}

.progressive-blur_panel.is-4 {
-webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio))));
backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio))));
-webkit-mask: linear-gradient(#0000 10%, #000 30% 40%, #0000 60%);
mask: linear-gradient(#0000 10%, #000 30% 40%, #0000 60%);
}

.progressive-blur_panel.is-5 {
-webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
-webkit-mask: linear-gradient(#0000 20%, #000 40% 50%, #0000 70%);
mask: linear-gradient(#0000 20%, #000 40% 50%, #0000 70%);
}

.progressive-blur_panel.is-6 {
-webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
-webkit-mask: linear-gradient(#0000 30%, #000 50% 60%, #0000 80%);
mask: linear-gradient(#0000 30%, #000 50% 60%, #0000 80%);
}

.progressive-blur_panel.is-7 {
-webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
-webkit-mask: linear-gradient(#0000 40%, #000 60% 70%, #0000 90%);
mask: linear-gradient(#0000 40%, #000 60% 70%, #0000 90%);
}

.progressive-blur_panel.is-8 {
-webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
-webkit-mask: linear-gradient(#0000 50%, #000 70% 80%, #0000 95%);
mask: linear-gradient(#0000 50%, #000 70% 80%, #0000 95%);
}

.progressive-blur_panel.is-9 {
-webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
-webkit-mask: linear-gradient(#0000 60%, #000 80% 90%, #0000 100%);
mask: linear-gradient(#0000 60%, #000 80% 90%, #0000 100%);
}

.progressive-blur_panel.is-10 {
-webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
-webkit-mask: linear-gradient(#0000 70%, #000 90%, #0000 100%);
mask: linear-gradient(#0000 70%, #000 90%, #0000 100%);
}

/* Debug info */
.debug-info {
position: fixed;
top: 10px;
left: 10px;
background:  white;
padding: 10px;
border: 1px solid black;
z-index: 10000;
font-family: monospace;
}< /code>






Contenu de test pour voir l'effet de flou progressif
Si le flou fonctionne, cette zone devrait être floue en bas

Test de l'effet de flou progressif
Support backdrop-filter: 
Toggle Background
Toggle Overflow

Подробнее здесь: https://stackoverflow.com/questions/797 ... g-and-z-in