Question

我目前正在IONIC中开发移动应用程序，并且要遵循我们的设计规范，我需要对图像的某些部分进行模糊处理。我的问题是，我们发现的所有解决方案或多或少在浏览器（Chrome）上都能正常运行，而在android的webview上却不行。背景过滤器不起作用，使用伪元素：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 webview（使用Ionic应用程序）。 MDN文档说android webview尚不支持background-filter属性。因此，我想这种解决方案将不是一个好方法。

解决方案2（在.blurred-bg元素上使用：before伪元素）：

<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 webview上，它仍然很滞后，模糊的背景图像大小调整得很差，即使在滚动时也始终位于同一位置。

在每种情况下，背景图像（在屏幕的某些部分模糊）将有所不同。而且页面上模糊元素的数量不会总是相同的（在大多数情况下，只有一个）

This is an example of what I try to reproduce on smartphone

有人会使用Html-css或最终使用JS解决方案吗？

在智能手机Webview上模糊图像的一部分

解决方案1（背景过滤器）

解决方案2（在.blurred-bg元素上使用：before伪元素）：

0 个答案: