Вступление.
Итак, то, что вы испытываете, не является чем-то новым, на самом деле это то, как правило стиля backdrop-filter работает в соответствии с W3C*. В сочетании с правилом стиля перехода и отсутствием фона это компенсирует то, что вы испытываете.
Советы по исправлению и кодированию.
Прежде чем мы начнем, я дам вам знать, что я не поддерживаю использование вами backdrop-filter, так как поддержки в нем недостаточно, как мы видим на очень надежном ресурсе* Я бы рекомендовал вам вместо этого использовать правило filter, так как оно поддерживается больше*
Теперь, чтобы перейти к некоторым ошибкам в коде и исправлению вашей проблемы:
body{
background-image: url("https://i.pinimg.com/originals/d2/64/ce/d264ce996ff6531fe191dfce5b200b3a.jpg");
background-position: center;
background-repeat: no-repeat;
background-color:yellow;
}
#el{
position:fixed;
top:14px;
left:14px;
right:14px;
bottom:14px;
-webkit-transition: all 7s;
-moz-transition: all 7s;
-o-transition: all 7s;
transition: all 7s;
}
#el.changeState{
-webkit-backdrop-filter:blur(7px);
backdrop-filter:blur(7px);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="Clicked()">Blur Me (:</button>
<script>
function Clicked() {
var el = document.getElementById('el');
el.innerHTML = ":O";
el.classList.add('changeState');
}
</script>
<p id="el"></p>
</body>
</html>
Что было бы намного лучше:
(function addBlurEffect() {
const d = document;
function getId(id) {
return d.getElementById(id);
}
let emptyParagaphTag = getId(`addTextTo`);
let button = getId(`listeningToButton`);
button.addEventListener(`click`, function stateClicked() {
this.innerHTML = `:O`;
emptyParagaphTag.classList.add(`changeState`);
// No overflows ;)
button.removeEventListener(`click`, stateClicked);
});
})();
// In my opinion, this Javascript code is much cleaner!
body {
background-image: url("https://i.pinimg.com/originals/d2/64/ce/d264ce996ff6531fe191dfce5b200b3a.jpg");
background-position: center;
background-repeat: no-repeat;
background-color: yellow; /* This wouldn't work... since it wold be covered.. I don't understand what you want with that, other than getting blinded? */
}
#addTextTo {
position:fixed;
top:14px;
left:14px;
right:14px;
bottom:14px;
-webkit-transition: all 7s;
-moz-transition: all 7s;
-o-transition: all 7s;
transition: all 7s;
background: rgba(255, 255, 255, 0.4); /* You forgot to add this! */
}
.changeState {
filter: blur(7px); /* Much better! */
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Example</title>
</head>
<body>
<!-- HTML code is free to breath now, nothing to be clogged here. -->
<button id="listeningToButton">Blur Me (:</button>
<p id="addTextTo"></p>
</body>
</html>
Outro.
Надеюсь, я помог вам добиться того, чего вы хотите, и устранил всю путаницу... кроме того, я открыт для любых вопросов о коде.
Ссылки.
(*) = Ссылки на вещи!
W3C => https://www.w3.org/TR/filter-effects-1/#supported-filter-functions
Правило CanIUse backdrop-filter (плохое) =› https://caniuse.com/#search=backdrop%20filter< /а>
Правило CanIUse filter (хорошее) =› https://caniuse.com/#search=CSS%20Filter%20Effects
person
ALPHA 7
schedule
22.06.2020
