如何仅在CSS中模糊背景图像 [英] how to blur the background image only in css
本文介绍了如何仅在CSS中模糊背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好，我想模糊背景图片，但我认为它缺乏这样做。任何对它的帮助都会增加我的能量。谢谢
这是我的CSS
html {
position ：亲戚;
最低身高：100％;
最大宽度：100％;
background：url（img / rsz_1spring.jpg）;
背景重复：不重复;
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
background-size：cover;
最大宽度：100％;
overflow-x：hidden;
我正在尝试应用此功能，但它会模糊我的所有网页
-webkit-filter：blur（5px）;
-moz-filter：blur（5px）;
-o-filter：blur（5px）;
-ms-filter：blur（5px）;
filter：blur（5px）;
谢谢。
解决方案 如果您对
< < html> 您需要创建另一个
< html> 应用模糊，那么它会模糊您的网页。 < < html> 您需要创建另一个
< div> ，其中< body> ，其大小与网页的大小相关并增加模糊度。
body {font-family：Arial;颜色：#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）;位置：固定;宽度：100％;身高：100％; top：0;左：0; z-index：-1;}
< h1>这是一个标题< / h1>< div class =page-bg>< / div>
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
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.
解决方案
If you are applying blur to <html> then it will blur your webpage.
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.
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>
这篇关于如何仅在CSS中模糊背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
