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

Bitte überprüfen Sie den unten stehenden Code:

.backgroundImageCVR{
    position:relative;
    padding:15px;
}
.background-image{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:url('https://i.imgur.com/5SZI6qZ.jpeg');
    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;
}

      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... Etiam at nisl eu felis vulputate porta.
      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.

Answer 2

In der .content Registerkarte in CSS ändern Sie es zu position:absolute. Andernfalls wird die gerenderte Seite nicht scrollbar sein.

Answer 3

Die Spezifikation hat eine neue filter() Funktion eingeführt, die Sie mit Hintergrundbildern wie unten verwenden können:

background: filter(url("whatever.jpg"), blur(5px));

Die Funktion hat zwei Argumente. Das erste Argument ist ein . Das zweite ist eine Filterfunktionsliste gemäß der CSS-Filtereigenschaft. Die Funktion nimmt den Parameter und wendet die Filterregeln an, um ein Verarbeitungsbild zurückzugeben.

Aber es gibt keine Browserunterstützung dafür: https://caniuse.com/css-filter-function. Sie können es vorerst nur in Safari testen.

Answer 4

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 5

Alles, was du wirklich brauchst, ist "filter":

blur(«WasImmerDuInPixelnWillst»);"

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

    /* Du kannst den Blur-Radius anpassen, wie du möchtest */
    filter: blur(3px);
}

Lorem Ipsum