javascript – 如何在Ionic / CSS中仅模糊背景而不是内容

发布时间：2020-12-14 19:45:51 所属栏目：资源来源：网络整理

导读：我试图为我的内容提供模糊的背景. 到目前为止我试过这个： .background-image { background-image: url('../img/background/image.jpg'); width: 100vw; height: 100vh; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-f

我试图为我的内容提供模糊的背景.

到目前为止我试过这个：

.background-image {
  background-image: url('../img/background/image.jpg');
  width: 100vw;
  height: 100vh;

  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

然后


但后来我得到了整个屏幕模糊的问题,而不仅仅是背景如下：


最佳答案
将内容放在模糊的div旁边.

.background-image {
  background-image: url('../img/background/image.jpg');
  width: 100vw;
  height: 100vh;

  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}



                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!