В настоящее время я работаю над мобильным приложением в IONIC, и чтобы следовать нашим спецификациям дизайна, мне нужно размыть некоторые части изображений.Моя проблема в том, что все найденные решения более или менее хорошо работают в браузере (Chrome), но не в веб-обзоре Android.Фоновый фильтр не работает, и метод, использующий псевдоэлемент: before больше не работает в Android.
Два решения, которые я пробовал и которые частично работают на Chrome:
Решение 1 (фон-фильтр)
<style>
body{
background-image: url("../../assets/img/yosemite.jpg");
}
.blurred-bg {
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height : 120px;
box-shadow : 0px 0px 15px rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.3);
}
@supports ((backdrop-filter: blur(10px))) or (-webkit-backdrop-filter: blur(10px)) {
.blurred-bg {
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
</style>
<body>
<ion-card id="box1" class="box blurred-bg tinted">
<ion-card-content class="content">
<h1>Blurred Background</h1>
<h2>By Ariona, Rian</h2>
</ion-card-content>
</ion-card>
</body>
Это решение отлично работает на Chrome (за исключением границы, но это нормально), но размытие не применяется к веб-представлению Android (с приложением Ionic).В документе MDN говорится, что свойство фонового фильтра еще не поддерживается в веб-обозревателе Android.Поэтому я предполагаю, что это решение не будет хорошим.
Решение 2 (с использованием псевдоэлемента: before для элементов .blurred-bg):
<style>
body{
background-image: url("../../assets/img/yosemite.jpg");
}
.blurred-bg {
height : 120px;
box-shadow : 0px 0px 15px rgba(0, 0, 0, 0.4);
}
.blurred-bg:before{
content : '';
background: url("../../assets/img/yosemite.jpg");
background-attachment: fixed;
background-size : cover;
filter : blur(10px);
position : absolute;
top : -20px;
left : -20px;
right : -20px;
bottom : -20px;
}
</style>
<body>
<ion-card id="box1" class="box blurred-bg tinted">
<ion-card-content class="content">
<h1>Blurred Background</h1>
<h2>By Ariona, Rian</h2>
</ion-card-content>
</ion-card>
</body>
Это решение отлично работает на Chrome, но немного запаздывает, когда я прокручиваю.В веб-представлении для Android оно все еще запаздывает, а размытое фоновое изображение сильно изменяется и всегда находится в одном и том же положении, даже когда я прокручиваю.
Фоновое изображение, которое будет размыто на некоторых частях экрана, будет различным для каждого случая.И количество размытых элементов на странице не всегда будет одинаковым (для большинства случаев будет только один)
Это пример того, что я пытаюсь воспроизвести на смартфоне
Будет ли у кого-нибудь решение с использованием Html-css или, в конечном итоге, JS?