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.

Osiągnięte za pomocą

.content {
  /* this is needed or the background will be offset by a few pixels at the top */
  overflow: auto;
  position: relative;
}

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

  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  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);
}

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Edytuj Jeśli chcesz usunąć białe obramowania na krawędziach, użyj szerokości i wysokości 110% oraz lewej i górnej krawędzi -5%. To trochę powiększy Twoje tła - ale nie powinno być jednolitego koloru krwawiącego z brzegi. Dzięki Chad Fawcett za sugestię.

.content {
  /* this is needed or the background will be offset by a few pixels at the top */
  overflow: auto;
  position: relative;
}

.content:before {
  content: "";
  position: fixed;
  top: -5%;
  left: -5%;
  right: -5%;
  z-index: -1;

  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  background-size:cover;
  width: 110%;
  height: 110%;

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

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

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

• Kopia rozmytego obrazu jako tła.
• pseudo element, 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 i jest ona obecnie obsługiwane w Chrome 76, Edge , Safari i iOS Safari (zobacz caniuse.com dla statystyk).

From Mozilla devdocs :

Właściwość filtr tła 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.

Zobacz caniuse.com do statystyk użytkowania.

Użyłbyś go w ten sposób. Jeśli nie chcesz, aby zawartość wewnątrz była rozmyta, Użyj klasy użytkowej .u-non-blurred

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
  top: 0;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

/* Use for content that should not be blurred */
.u-non-blurred {
  position: relative;
  z-index: 1;
}

<div class="background background-filter"></div>
<div class="background background-filter">
  <h1 class="u-non-blurred">Kermit D. Frog</h1>
</div>

Aktualizacja (12/06/2019): Chromium będzie wysyłane z backdrop-filter włączoną domyślnie w wersji 76, która ma zostać wydana 30.07.2019.

Aktualizacja (01/06/2019): zespół Mozzilla Firefox ogłosił , że wkrótce rozpocznie prace nad wdrożeniem tego rozwiązania.

Aktualizacja (21.05.2019): Chromium właśnie ogłoszono backdrop-filter jest dostępny w Chrome canary bez włączania flagi "Enable Experimental web Platform Features". Oznacza to, że backdrop-filter jest bardzo blisko implementacji we wszystkich chrome perony.

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>

Poniżej znajduje się proste rozwiązanie dla nowoczesnych przeglądarek w czystym CSS z pseudo elementem "przed", jak rozwiązanie Matthew Wilcoxsona.

Aby uniknąć konieczności dostępu do pseudo elementu w celu zmiany obrazu i innych atrybutów w JavaScript, po prostu użyj inherit jako wartości i uzyskaj 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

Wszystko czego potrzebujesz to "filtr":

blur(«WhatEverYouWantInPixels»);"

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>

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

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

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

Możesz utworzyć div nad obrazem, który chcesz zastosować i użyć backdrop-filter do jego klasy CSS. Sprawdź TEN link

Nie pisałem tego, ale zauważyłem, że istnieje polyfill Dla częściowo wspieranego backdrop-filter przy użyciu kompilatora CSS SASS, więc jeśli masz rurociąg kompilacji, można go ładnie osiągnąć (używa również maszynopisu):

Https://codepen.io/mixal_bl4/pen/EwPMWo

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

Ta odpowiedź dotyczy materiału 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.
• Karta składa się z dwóch elementów, obraz, który jest również a link i treść.
• link <a>, class link , jest umieszczony relative .
• link składa się z dwóch podelementów, klasy zastępczej <div> blur oraz klasy <img> 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 symbol zastępczy 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>

Teraz to staje się jeszcze prostsze i bardziej elastyczne za pomocą CSS GRID.Po prostu trzeba nakładać rozmyte tło (imgbg) z tekstem (h2)

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

I css:

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

Bez użycia pseudo-klasy z

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}

<body></body>

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 teraz, nie tylko ta osoba nauczyła cię, jak zrobić rozmyte tło, ale jest to również efekt tła paralaksy!