Как размыть фоновое изображение только в 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);

Спасибо.

Ответ 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>

Ответ 2

Назначьте атрибут id или class для тега изображения или содержимого, содержащего div, затем присвойте свойство css этому конкретному тегу изображения или div, содержащему изображение. Вы размываете весь html, который, очевидно, размывает всю веб-страницу.

Например,

<div class="image-container"><img class="blurred" src="..." /></div>

либо вы размываете изображение-контейнер, либо прямое изображение или изображение div

.image-container, .blurred, .image-container>img {
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   filter: blur(5px);
}