stylo

supprimer la nécessité d'un élément supplémentaire, tout en faisant correspondre le contenu dans le flux de documents plutôt que d'être fixe/absolu comme les autres solutions.

obtenu en utilisant

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

Overflow auto est nécessaire, sinon le fond sera compensée par quelques pixels en haut.

après cela, vous avez simplement besoin de

.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);
}

éditer si vous êtes intéressé à enlever les frontières blanches sur les bords, utiliser une largeur et hauteur de 110% et une gauche et le haut de -5% . Cela élargira vos fonds un peu - mais il ne doit pas y avoir de couleur solide saignant dans les bords.

mise à jour du stylo ici: https://codepen.io/anon/pen/QgyewB - remercie Chad Fawcett pour la suggestion.

comme indiqué dans d'autres réponses, cela peut être réalisé avec:

• une copie de l'image floue en arrière-plan.
• un pseudonyme qui peut être filtré puis placé derrière le contenu.

vous pouvez également utiliser backdrop-filter

il y a une propriété supportée appelée backdrop-filter , elle est actuellement supportée dans Edge , Safari et iOS Safari (voir caniuse.com pour les statistiques).

à Partir de Mozilla devdocs :

la propriété backdrop-filter fournit des effets comme le flou ou le déplacement de la couleur de la zone derrière un élément, qui peut ensuite être vu à travers cet élément en ajustant la transparence/opacité de l'élément.

vous l'utilisez comme ceci:

.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
}

Pour les stats voir caniuse.com

vous devez restructurer votre HTML pour ce faire. Il faut flouter tout l'élément pour flouter le fond. Donc, si vous voulez brouiller seulement l'arrière-plan, il doit être son propre élément.

veuillez cocher le code ci-dessous: -

.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>

la solution la plus Simple pour les navigateurs modernes en pur css avec un "avant" pseudo-élément comme la solution de Matthieu Wilcoxson. Pour éviter le besoin d'accéder à l'élément pseudo pour changer l'image et d'autres attributs dans le script java, l'utilisation simple hérite comme valeur et les accéder via l'élément parent (ici le corps).

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 */  
}   

dans l'onglet .content dans CSS, changez-le en position:absolute . Sinon, la page rendue ne sera pas scrollable.

bien que toutes les solutions mentionnées soient très astucieuses, toutes semblaient avoir des problèmes mineurs ou des impacts potentiels sur les effets avec d'autres éléments sur la page quand je les ai essayées.

à la fin pour gagner du temps je suis simplement retourné à mon ancienne solution: j'ai utilisé Paint.NET et est allé aux effets, Gaussian Blur avec un rayon de 5 à 10 pixels et vient de Enregistré que l'image de la page. :- )

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:

j'ai finalement obtenu le travail, mais la solution n'est pas simple! Voir ici:

• filter: blur(1px); ne fonctionne pas dans firefox, IE et opera

cette réponse s'applique à une carte de conception de matériaux à disposition horizontale avec hauteur dynamique et une image.

pour éviter la distorsion de l'image due à la hauteur dynamique de la carte, vous pouvez utiliser une image d'arrière-plan avec flou pour ajuster les changements de hauteur.

explication

• la carte est contenue dans un <div> avec classe wrapper , qui est un flexbox.
• La carte est composée de 2 éléments, une image qui est aussi un lien et le contenu.
• le lien <a> , classe lien , est positionné relative .
• le lien se compose de 2 sous-éléments, un espace <div> classe flou et un <img> classe pic qui est l'image claire.
• tous les deux sont positionnés absolu et ont width: 100% , mais la classe pic a un ordre de pile plus élevé, i.e., z-index: 2 , qui le place au-dessus de l'espace réservé.
• l'image d'arrière-plan pour le paramètre flou est positionnée via dans le style inline dans le HTML.

Code

.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);
}

bien sûr, ce n'est pas une solution CSS, mais vous pouvez utiliser CDN Proton avec filtre:

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

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

all you actually need is" filter: blur (ż 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>

je le dis à pep, si ça n'a pas déjà été dit. Si vous voulez que content soit scrollable, définissez la position du contenu à absolu:

content { 
   position: absolute;
   ...
}

je ne sais pas si c'était juste pour moi, mais si ce n'est la solution!

aussi puisque le fond est fixe, cela signifie que vous avez un effet de parallaxe! Ainsi, sachez que non seulement cette personne vous a appris à faire un fond flou, mais aussi un fond de parallaxe effet de!