Wie wendet man einen CSS-Filter auf ein Hintergrundbild an

Question

Ich habe eine JPEG-Datei, die ich als Hintergrundbild für eine Suchseite verwende, und ich verwende CSS, um es zu setzen, weil ich innerhalb von Backbone.js-Kontexten arbeite:

background-image: url("whatever.jpg");

Ich möchte einen CSS 3 Unschärfefilter nur auf den Hintergrund anwenden, bin mir aber nicht sicher, wie ich nur dieses eine Element gestalten soll. Wenn ich versuche:

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

direkt unterhalb von background-image in meinem CSS, dann wird die gesamte Seite gestaltet, anstatt nur den Hintergrund. Gibt es eine Möglichkeit, nur das Bild auszuwählen und den Filter darauf anzuwenden? Alternativ, gibt es eine Möglichkeit, den Unschärfefilter für jedes andere Element auf der Seite einfach auszuschalten?

Answer 1

Jetzt wird dies noch einfacher und flexibler, indem CSS GRID verwendet wird. Sie müssen einfach den verschwommenen Hintergrund (imgbg) mit dem Text (h2) überlappen

  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)

und das 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;
      }

Answer 2

CSS-Gitter ist für mich einfacher zu verstehen. :)

html, body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-template-rows: 1fr 6fr 1fr;
  grid-template-areas: 
  '. . .'
  '. content .'
  '. . .'; 
  justify-content: center;
  align-items: center;
}

.backbround {
  width: 100%;
  height: 100%;

  grid-area: 1/1/5/5;

  background-image: url(https://i.imgur.com/aUhpEz3.jpg);
  filter: blur(5px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  height: 200px;
  position: relative;

  grid-area: content;
  display: flex;

  justify-content: center;
  align-items: center;
  color: white;
}

  Hallo Welt

Answer 3

Obwohl alle genannten Lösungen sehr clever sind, schien es, als hätten alle kleine Probleme oder potenzielle Auswirkungen auf andere Elemente auf der Seite, als ich sie ausprobierte.

Letztendlich bin ich einfach zu meiner alten Lösung zurückgegangen, um Zeit zu sparen: Ich habe Paint.NET verwendet und bin zu Effects, Gaussian Blur mit einem Radius von 5 bis 10 Pixeln gegangen und habe das als Seitenbild gespeichert. :-)

HTML:

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:

Ich habe es schließlich zum Laufen bekommen, aber die Lösung ist keineswegs einfach! Siehe hier:

• filter: blur(1px); funktioniert nicht in Firefox, IE und Opera

Answer 4

Diese Antwort gilt für ein Material Design horizontales Kartenlayout mit dynamischer Höhe und einem Bild.

Um Verzerrungen des Bildes aufgrund der dynamischen Höhe der Karte zu verhindern, könnte man ein Hintergrundplatzhalterbild mit Unschärfe verwenden, um die Höhenänderungen auszugleichen.

Erklärung

• Die Karte ist in einem

  mit der Klasse wrapper enthalten, das ein Flexbox ist.

• Die Karte besteht aus zwei Elementen, einem Bild, das auch ein Link ist, und Inhalt.

• Der Link , Klasse link, ist relativ positioniert.

• Der Link besteht aus zwei Unterelementen, einem Platzhalter

  Klasse blur und einem Klasse pic, das das klare Bild ist.

• Beide sind absolut positioniert und haben width: 100%, aber die Klasse pic hat eine höhere Stapelreihenfolge, d.h. z-index: 2, was sie über den Platzhalter positioniert.

• Das Hintergrundbild für den verschwommenen Platzhalter wird über inline Style im HTML festgelegt.

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

  `

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

Answer 5

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