嗨,我想模糊背景图像,但我认为它缺乏这样做.对它的任何帮助都会增加我的能量.谢谢
这是我的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>