如何仅在CSS中模糊背景图像

小编典典

如何仅在CSS中模糊背景图像

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;

}

我正在尝试应用此功能，但它只会模糊我所有插入背景图像的网页。

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

谢谢。

阅读 412

2020-05-16

共1个答案

小编典典

如果您要应用模糊处理，<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>

2020-05-16