pen

отмена необходимости в дополнительном элементе, наряду с тем, чтобы содержимое соответствовало потоку документов, а не было фиксированным/абсолютным, как другие решения.

достигается с помощью

.content {
  overflow: auto;
  position: relative;
}

переполнение авто необходимо, иначе фон будет смещен на несколько пикселей в верхней части.

после этого вам просто нужно

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

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

EDIT если вы заинтересованы в удалении белых границ края, используйте ширину и высоту 110%, и слева, и сверху -5%. Это немного увеличит ваш фон , но не должно быть сплошного цвета, кровоточащего по краям.

Обновлено перо здесь:https://codepen.io/anon/pen/QgyewB - Спасибо Чеду Фосетту за предложение.

как указано в других ответах, это может быть достигнуто с помощью:

• копия размытого изображения в качестве фона.
• псевдо-элемент, который может быть отфильтрован, а затем расположен за содержимым.

вы также можете использовать backdrop-filter

существует поддерживаемое свойство под названием backdrop-filter в настоящее время поддерживается в Edge, Safari и iOS Safari (см. caniuse.com ибо статистика.)

С Mozilla devdocs:

свойство backdrop-filter обеспечивает такие эффекты, как размытие или изменение цвета области за элементом, которые затем можно увидеть через этот элемент, регулируя прозрачность/непрозрачность элемента.

вы бы использовали его так:

.box {
  -webkit-backdrop-filter: blur(5px); // Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+
  backdrop-filter: blur(5px); // No one supports non prefixed yet
}

для статистики см. caniuse.com

вам нужно перестроить свой HTML для того, чтобы сделать это. Вы должны размыть весь элемент, чтобы размыть фон. Поэтому, если вы хотите размыть только фон, он должен быть своим собственным элементом.

пожалуйста, проверьте ниже код:-

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);	
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}

<div class="backgroundImageCVR">
    <div class="background-image"></div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
      <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
    </div>
</div>

простое решение для современных браузеров в чистом css с псевдо-элементом "до", таким как решение от Мэтью Уилкоксона. Чтобы избежать необходимости доступа к псевдо-элементу для изменения изображения и других атрибутов в Java-скрипте, просто используйте наследование как значение и доступ к ним через родительский элемент (здесь тело).

body::before{
  content: ""; /* important */
  z-index: -1; /* important */
  position: inherit;  
  left: inherit;
  top: inherit;
  width: inherit;                                                                               
  height: inherit;  
  background-image: inherit;
  background-size: cover; 
  filter: blur(8px);
}
body{
  background-image: url("xyz.jpg"); 
  background-size: 0 0;  /* image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* or absolute for scrollable backgrounds */  
}   

на .content вкладка в CSS изменить его на position:absolute. В противном случае отрисованная страница не будет прокручиваться.

хотя все упомянутые решения очень умны, у всех, казалось, были незначительные проблемы или потенциальные эффекты стука с другими элементами на странице, когда я их пробовал.

в конце концов, чтобы сэкономить время, я просто вернулся к своему старому решению: я использовал Paint.NET и перешел к эффектам, Гауссовскому размытию с радиусом от 5 до 10 пикселей и просто сохранил это как изображение страницы. : -)

HTML:

<body class="mainbody">
</body

CSS:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

EDIT:

Я, наконец, получил его работу, но решение отнюдь не просто! Смотрите здесь:

• Фильтр: Размытие (1px); не работает в firefox, IE и opera

этот ответ для материального плана карты дизайна горизонтального с динамической высотой и изображением.

чтобы предотвратить искажение изображения из-за динамической высоты карты, вы можете использовать фоновое изображение-заполнитель с размытием для регулировки изменения высоты.

объяснение

• карта содержится в <div> класс фантик, который является flexbox.
• карта состоит из 2 элементы, изображение которых также ссылка, и содержание.
• ссылке <a>, класс ссылке, расположенный относительные.
• ссылка состоит из 2 частей, заполнитель <div> класс размытие и <img> класс pic который является четкое изображение.
• оба позиционируются абсолютное и width: 100%, но класс pic имеет более высокий порядок стека, т. е., z-index: 2, который помещает его над заполнителем.
• фоновое изображение для размытого заполнителя устанавливается через встроенный стиль в HTML.

код

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}

<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>

div{
 background: inherit;
 width: 250px;
 height: 350px;
 position: absolute;
 overflow: hidden;  //adding overflow hidden
}
div:before{
 content: ‘’;
 width: 300px;
 height: 400px;
 background: inherit; 
 position: absolute;
 left: -25px;  //giving minus -25px left position
 right: 0;
 top: -25px;   //giving minus -25px top position 
 bottom: 0;
 box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3);
 filter: blur(10px);
}

конечно, это не CSS-решение, но вы можете использовать Протон CDN с фильтром:

body { 
background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

от https://developer.wordpress.com/docs/photon/api/#filter

все, что вам на самом деле нужно, это "фильтр: размытие (What WhatEverYouWantInPx≫);"

body {
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
}

#background {
  background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  
  /* START */
  /* START */
  /* START */
  /* START */
  
  /* You can adjust the blur-radius as you'd like */
  filter: blur(3px);
  
}

<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

просто давая знать Пеп, если это уже не было сказано. Если вы хотите, чтобы содержимое было прокручиваемым, установите положение содержимого в абсолютное:

content { 
   position: absolute;
   ...
}

Я не знаю, если это было только для меня, но если бы не это исправить!

и поскольку фон фиксирован, это означает, что у вас есть эффект "параллакс"! Так что знайте, что этот человек не только научил вас, как сделать размытый фон, но и эффект параллакса фона!