<分区>
<分区>
您好，我正在尝试模糊背景图像，但我认为这样做效果不佳。对它的任何帮助都会增加我的能量。谢谢
这是我的 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;
}
我正在尝试应用它，但它模糊了我所有的网页，只显示了背景图片。
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
谢谢。
最佳答案
如果您对 <html> 应用模糊然后它会模糊你的网页。
而不是将背景添加到 <html>您需要创建另一个 <div>在<body>与网页大小相匹配，并添加模糊效果。
示例
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>关于html - 如何仅在CSS中模糊背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42489776/