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

    Dokument

    *{
        margin: 0; padding: 0; box-sizing: border-box;
        font-size: 30px;
    }
    .parent{
background-image:url(hobby.jpg) ;
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-size: cover;
background-position: center;

display: flex;
justify-content: center;
align-items: center;
    }
    .child{

    height: 90vh;
    width: 90vw;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.418);
  justify-content: center;
  align-items: center;
    display: flex;

    }
  .text{

      height: 300px;
      width: 300px;
      border-radius: 500px;
      background-image: url(50cf380e5c78eb174faa8e6ac2cb654a.jpg);
      background-size: cover;
      background-position: center;

  }

Answer 2

Ich habe das nicht geschrieben, aber ich habe bemerkt, dass es ein Polyfill für das teilweise unterstützte backdrop-filter mit dem CSS SASS Compiler gibt, sodass es bei einem Kompilierungspipeline schön erreicht werden kann (es verwendet auch TypeScript):

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

Answer 3

Ohne die Pseudo-Klasse from zu verwenden

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

Answer 4

Sie können ein

über dem Bild erstellen, auf das Sie den Filter anwenden möchten, und backdrop-filter seiner CSS-Klasse hinzufügen. Werfen Sie einen Blick auf diesen Link

Answer 5

div {
    Hintergrund erben;
    Breite: 250px;
    Höhe: 350px;
    Position: absolut;
    Überlauf: versteckt;  /* Overflow verstecken hinzufügen */
}

div:before {
    Inhalt: ‘’;
    Breite: 300px;
    Höhe: 400px;
    Hintergrund erben;
    Position: absolut;
    Links: -25px;  /* Minus -25px linke Position geben */
    Rechts: 0;
    Oben: -25px;   /* Minus -25px obere Position geben */
    Unten: 0;
    Box-Schatten: eingefügt 0 0 0 200px rgba(255, 255, 255, 0,3);
    Filter: verschwommen(10px);
}