html – 如何仅在css中模糊背景图像

前端之家收集整理的这篇文章主要介绍了html – 如何仅在css中模糊背景图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
嗨,我想模糊背景图像,但我认为它缺乏这样做.对它的任何帮助都会增加我的能量.谢谢

这是我的CSS

  1. html {
  2. position: relative;
  3. min-height: 100%;
  4. max-width: 100%;
  5. background: url(img/rsz_1spring.jpg);
  6. background-repeat: no-repeat;
  7. -webkit-background-size: cover;
  8. -moz-background-size: cover;
  9. -o-background-size: cover;
  10. background-size: cover;
  11. max-width: 100%;
  12. overflow-x: hidden;
  13.  
  14. }

我正在尝试应用此功能,但它模糊了我的所有网页仅显示背景图像.

  1. -webkit-filter: blur(5px);
  2. -moz-filter: blur(5px);
  3. -o-filter: blur(5px);
  4. -ms-filter: blur(5px);
  5. filter: blur(5px);

谢谢.

解决方法

如果您将模糊应用于< html>然后它会模糊你的网页.

而不是将背景添加到< html>您需要创建另一个< div>在< body>中与网页的大小相同,并为其添加模糊.

  1. body {
  2. font-family: "Arial";
  3. color: #fff;
  4. }
  5.  
  6. .page-bg {
  7. background: url('http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg');
  8. -webkit-filter: blur(5px);
  9. -moz-filter: blur(5px);
  10. -o-filter: blur(5px);
  11. -ms-filter: blur(5px);
  12. filter: blur(5px);
  13. position: fixed;
  14. width: 100%;
  15. height: 100%;
  16. top: 0;
  17. left: 0;
  18. z-index: -1;
  19. }
  1. <h1>
  2. This is a title
  3. </h1>
  4.  
  5. <div class="page-bg">
  6. </div>

猜你在找的HTML相关文章