Długopis

Zniesienie potrzeby dodatkowego elementu, wraz z dostosowaniem treści do przepływu dokumentu, a nie do stałej/absolutnej jak inne rozwiązania.

]}

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

Overflow auto jest potrzebne, w przeciwnym razie tło zostanie przesunięte o kilka pikseli u góry.

Po tym po prostu potrzebujesz

.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 Jeśli jesteś zainteresowany usunięciem białych obramowań na krawędziach, użyj szerokości i wysokości 110% oraz po lewej i na górze -5%. To trochę powiększy Twoje tła - ale nie powinno być jednolitego koloru krwawiącego z krawędzi.

Zaktualizowano pióro tutaj: https://codepen.io/anon/pen/QgyewB - dzięki Chad Fawcett za sugestię.

Jak stwierdzono w innych odpowiedziach można to osiągnąć za pomocą:

• Kopia rozmytego obrazu jako tła.
• pseudo elment, który może być filtrowany, a następnie umieszczony za treścią.

Możesz również użyć backdrop-filter

Istnieje obsługiwana właściwość o nazwie backdrop-filter, obecnie jest ona OBSŁUGIWANA W Edge , Safari i iOS Safari (zobacz caniuse.com dla statystyk).

From Mozilla devdocs :

The właściwość backdrop-filter zapewnia efekty takie jak rozmycie lub przesunięcie koloru obszaru za elementem, które można następnie zobaczyć przez ten element, dostosowując jego przezroczystość/krycie.

Użyłbyś go tak:

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

Statystyki patrz caniuse.com

Aby to zrobić, musisz zmienić strukturę swojego HTML . Aby zamazać tło, trzeba zamazać cały element. Więc jeśli chcesz rozmazać tylko tło, musi to być jego własny element.

Proszę sprawdzić poniższy kod: -

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

Proste rozwiązanie dla nowoczesnych przeglądarek w czystym css z pseudo elementem 'przed' jak rozwiązanie Matthew Wilcoxsona. Aby uniknąć konieczności uzyskiwania dostępu do pseudo elementu w celu zmiany obrazu i innych atrybutów w java script, wystarczy użyć dziedziczenia jako wartości i uzyskać do nich dostęp poprzez element nadrzędny (tutaj body).

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

W zakładce .content w CSS zmień ją na position:absolute. W przeciwnym razie renderowana strona nie będzie przewijana.

Chociaż wszystkie wymienione rozwiązania są bardzo sprytne, wszystkie wydawały się mieć drobne problemy lub potencjalne efekty knock on z innymi elementami na stronie, kiedy próbowałem.

W końcu, aby zaoszczędzić czas, po prostu wróciłem do mojego starego rozwiązania: użyłem Paint.NET i poszedł do efektów, rozmycie Gaussa o promieniu 5 do 10 pikseli i po prostu zapisał to jako obraz strony. :-)

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:

I finally got it working, ale rozwiązanie nie jest bynajmniej proste! Zobacz tutaj:

• filter: blur(1px); doesn ' t work in firefox, IE, and opera

Ta odpowiedź dotyczy poziomego układu kart z dynamiczną wysokością i obrazem.

Aby zapobiec zniekształceniu obrazu z powodu dynamicznej wysokości karty, można użyć obrazu zastępczego tła z rozmyciem, aby dostosować się do zmian wysokości.

Wyjaśnienie

• Karta jest zawarta w <div> Z klasą wrapper, która jest flexbox.
[17]}Karta składa się z 2 elementów. obrazek jest również link, oraz treść.
• link <a>, class link , jest umieszczony relative .
• link składa się z 2 podelementów, zastępczego <div> klasy blur oraz <img> klasy pic, która jest przezroczystym obrazem.
• obie są umieszczone absolutne i mają width: 100%, ale Klasa pic ma wyższy porządek stosu, tzn. z-index: 2, który umieszcza ją nad symbolem zastępczym.
• obraz tła dla rozmytego elementu zastępczego jest ustawiany za pomocą inline style W HTML.

Kod

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

Oczywiście nie jest to rozwiązanie CSS, ale możesz użyć CDN Proton z filtrem:

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

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

Wszystko, czego potrzebujesz, to "filter: blur (What whatever Ouwantinpx≫);"

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>

Po prostu daj znać pep ' owi, jeśli to już nie zostało powiedziane. Jeśli chcesz, aby zawartość była przewijalna, ustaw pozycję zawartości na absolutną:

content { 
   position: absolute;
   ...
}

Również ponieważ tło jest stałe, oznacza to, że masz efekt 'paralaksy'! Więc wiedz, że nie tylko ta osoba nauczyła cię, jak zrobić rozmyte tło, ale także efekt tła paralaksy!