Html 如何仅在css中模糊背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38366571/
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 the background image only in css
提问by Tanmoy Sarkar
Hi i am trying to blur the background image but i think its lacking in doing so. Any help over it will boost my energy for it. Thanks
嗨，我正在尝试模糊背景图像，但我认为它缺乏这样做。任何对它的帮助都会增强我的能量。谢谢
This my CSS
这是我的 CSS
html {
position: relative;
min-height: 100%;
max-width: 100%;
background: url(img/rsz_1spring.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width: 100%;
overflow-x: hidden;
}
I am trying to apply this but it blur all my webpage instaed of background image only.
我正在尝试应用它，但它只模糊了我所有网页的背景图像。
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
Thank you.
谢谢你。
采纳答案by Kan412
If you are applying blur to <html>then it will blur your webpage.
如果您应用模糊，<html>那么它会模糊您的网页。
Instead of adding background to <html>You need to create another <div>with in <body>with size to that of webpage and add blur to it.
<html>您需要创建另一个<div>与<body>网页大小相同的背景，并为其添加模糊效果，而不是添加背景。
Example
例子
body {
font-family: "Arial";
color: #fff;
}
.page-bg {
background: url('http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg');
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}<h1>
This is a title
</h1>
<div class="page-bg">
</div>回答by Kijan Maharjan
Assign id or class attribute to image tag or div containing image then assign css property to that particular image tag or div containing image. You are blurring for whole html that will obviously blur whole webpage.
将 id 或 class 属性分配给包含图像的图像标记或 div，然后将 css 属性分配给该特定图像标记或包含图像的 div。您正在模糊整个 html，这显然会模糊整个网页。
For eg:
例如：
<div class="image-container"><img class="blurred" src="..." /></div>
either you blur to image-container or to image directly like or image of div
要么模糊到图像容器，要么直接像 div 或图像一样图像
.image-container, .blurred, .image-container>img {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
