javascript 如何在 Ionic/CSS 中仅模糊背景而不是内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31051816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to blur only background and not content in Ionic/CSS
提问by JohnAndrews
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
接着
<ion-view class="background-image">
// header, content, footer etc
<ion-view>
But then I get the problem that the whole screen is blurred and not only the background as follows:
但是后来我得到了整个屏幕模糊而不仅仅是背景的问题，如下所示：
采纳答案by Karan Bhutwala
put content out side the blurred div.
将内容放在模糊的 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);
}
<div class="background-image"></div>
<div>Content</div>
回答by Taurus
there is an other way come to my head which is add second background-image,
which in css3 you can have multi backgroundfor one element, and the second one can be a blur image, even with low quality , like this
我想到了另一种方式，即添加第二个background-image，在 css3 中，您可以background为一个元素设置多个，而第二个可以是模糊图像，即使质量很低，就像这样
in sass
在 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
我想第二个将覆盖第一个或反向，您可以尝试一下
回答by Matthijs Otterloo
Put the image outside the other div... Like this:
将图像放在另一个 div 之外......像这样：
<div class="background-image"></div>
<div class="content">
<p>Here goes your content</p>
</div>
