热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在Ionic/CSS中只模糊背景而不模糊内容-HowtobluronlybackgroundandnotcontentinIonic/CSS

Iamtryingtohaveablurredbackgroundformycontent.我正试图为我的内容设置一个模糊的背景。SofarItriedthis:到

I am trying to have a blurred background for my content.

我正试图为我的内容设置一个模糊的背景。

So far I tried this:

到目前为止,我尝试了这个:

.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);
}

and then

然后


   // header, content, footer etc

But then I get the problem that the whole screen is blurred and not only the background as follows:

但后来我发现整个屏幕是模糊的,不仅仅是背景是这样的:

Content

#2


3  

there is an other way come to my head which is add second background-image, which in css3 you can have multi background for one element, and the second one can be a blur image, even with low quality , like this

另一种方法是添加第二个背景图像,在css3中,一个元素可以有多个背景,第二个元素可以是一个模糊的图像,即使是低质量的,像这样

in sass

在萨斯

#element
 background:
  image: url(/*first url*/), url(/*second url*/)
  size: auto auto /*first one*/, 100% 100% /* second one*/

i guess second will cover first or revers , you can try it out

我想第二种方法可以先覆盖,也可以尝试,你可以试一下。

#3


2  

Put the image outside the other div... Like this:

把图像放在另一个div…是这样的:

Here goes your content


推荐阅读
author-avatar
mobiledu2502916457
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有