CSS abschwächen Hintergrund-Bild, Nur Mit Anderen Bildern in Div Aufenthalt Gesättigt

Ich versuche zu Entsättigen das Bild im hintergrund eines div-während die Bilder im selben div gesättigt. Die ich gefunden habe, ein Beispiel dafür schließen, was ich versuche zu tun (außer w/Unschärfe), aber habe versucht mehrere Variationen davon w/kein Erfolg.

In den folgenden code, der .die Sättigung richtig Klasse wendet den filter Attribute und dreht bg Bild in b&w. Das andere Bild w/in diesem Abschnitt-tag erbt die Sättigung wie zu erwarten wäre, aber wenn ich versuche, zu "re-sättigen" durch die img.sättigen-Klasse ist es nicht angewandt werden. Ich habe schnitzte nach unten mein code so kurz/basic, wie es bekommen kann, um zu erklären, was ich versuche zu tun. Jede Idee oder Lösung, wie dies gemacht werden kann, wird geschätzt.

<html>
  <style>
    .desaturate {
      width: 100%;
      height: 100%;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
       /*grayscale for background image*/
      -webkit-filter: grayscale(1); 
      -webkit-filter: grayscale(100%); 
      -moz-filter: grayscale(100%);
      filter: gray; 
      filter: grayscale(100%);
      filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
    }

  img.saturate {
    filter: none !important;
    width: 300px;
    height: 200px;
    -webkit-filter: grayscale(0%) !important;
    -moz-filter:    grayscale(0%) !important;
    -ms-filter:     grayscale(0%) !important;
    -o-filter:      grayscale(0%) !important;
  }
  </style>
  <body>
    <section class="desaturate" style="background-image: url('bg-img-1.jpg');">
      <div class="row">
        <div class="col-md-12">
          <img src="img-2.jpg" class="img-responsive saturate" alt="" />      
        </div>
      </div>
    </section>
  </body> 
</html>

Könnten Sie werfen diese in ein JSFiddle oder CodePen?

InformationsquelleAutor mk97 | 2014-12-19

css css3

Sättigung arbeitet in der gleichen Weise wie Deckkraft, können Sie nicht, wenden Sie den Effekt zu einem Elternteil und dann das rückgängig machen bei einem Kind. Die beste option wäre wahrscheinlich zu machen, die grayscaled Bild, das ein Kind von Ihrem Abschnitt, aber nicht ein Elternteil das Bild:

<section>
  <figure class="desaturate" style="background-image: url('bg-img-1.jpg');"></figure>
  <div class="row">
    <div class="col-md-12">
      <img src="img-2.jpg" class="img-responsive saturate" alt="" />      
    </div>
  </div>
</section>

Ihre andere option wäre die Erben der hintergrund in einem ::before oder ::after pseudo-element und wenden Sie den filter gibt es:

.desaturate {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.desaturate:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
   /*grayscale for background image*/
  -webkit-filter: grayscale(1); 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%);
  filter: gray; 
  filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

Sehen Sie eine demo hier: http://codepen.io/Godwin/pen/ogLPvR.

Bearbeiten:
Nur aus Gründen von Interesse, es ist ein weiterer Weg, dies zu tun, aber es muss nicht high-browser-Unterstützung noch:

.desaturate {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*grayscale for background image*/
    background-color: #FFF;
    background-blend-mode: luminosity, normal;
}

Referenz: https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

Beispiel: http://codepen.io/Godwin/pen/raLZVr

Unterstützung: http://caniuse.com/#feat=css-backgroundblendmode

derselbe trick, wie raten für mich, wenn das passt zu Ihrem echten Dokument : meine version codepen.io/anon/pen/zxBJYm
Danke... habe versucht die :vor, basierend auf das andere Beispiel, das ich geschrieben in meiner Frage, aber couldnt get it right. Dies funktioniert genau wie ich es brauche. Nochmals vielen Dank.

InformationsquelleAutor Godwin

1

Stellen Sie Ihr Hintergrundbild ein Kind

Mit Ihr Hintergrundbild als ein Kind, dann können Sie filter auf das element.
```
filter: grayscale(60%);
-webkit-filter: grayscale(60%);
-moz-filter: grayscale(60%);
-ms-filter: grayscale(60%);
-o-filter: grayscale(60%);
```
Alternativ, pflegen Sie Ihre HTML-Struktur, sondern nur Ziel-hintergrund-Bild...

Bezug auf hintergrund, Bild, Filter nicht zur Verfügung, jedoch können Sie den gleichen Sättigungseffekt mit diesem trick mit background-blend-mode.

In der Regel background-blend-mode ist on-oder-off (also Sie kann nicht definieren, Prozentsatz), jedoch mit der unten trick, den Sie tatsächlich bekommen können variable Sättigung:
```
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(image.jpg);
background-blend-mode: saturation;
```
Dadurch erhalten Sie eine 60% ige Entsättigung nur auf dem hintergrund-Bild, mit background-blend-mode. Der Schlüssel ist die Verwendung von linear-gradient, mit der Deckkraft einstellen auf die Farben. Ich kann nicht scheinen, um zu replizieren, den gleichen Effekt nicht Verwendung eines Gradienten (dh eine solide Farbe mit der Deckkraft).

Browser-Unterstützung:

Beide filter und background-blend-mode haben eine schwächere Unterstützung in IE/Edge, also vielleicht verwenden Sie separate CSS-Regeln für Browser (wie beschrieben in Tonnen von anderen posts).

InformationsquelleAutor MarsAndBack

Hier ist deine Korrektur:

Beispiel Fiddle

Also, im Grunde, Sie Ihre CSS-versaut ist ziemlich schlecht. Die baumelnden !important Modifikatoren nach Ihrem Semikolon und die willkürlich inklusive semi-colons nach, die nicht helfen.

CSS-Änderungen

.desaturate {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

}

.desaturate img {
  /*grayscale for background image*/
  -webkit-filter: grayscale(1); 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%);
  filter: gray; 
  filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}



.desaturate img.saturate {
  filter: none !important;
  width: 300px;
  height: 200px;
  -webkit-filter: grayscale(0%);
  -moz-filter:    grayscale(0%);
  -ms-filter:     grayscale(0%);
  -o-filter:      grayscale(0%);
}

Können Sie nicht, wenden Sie den filter auf die ganze div und dann überschreiben, auf ein child-element (in diesem Fall Ihre img. So wenden wir den filter auf den img ersten und überschreiben Sie es mit Ihren saturate Klasse.

Voila.

ist es nicht Sinn der hintergrund 🙂 jsfiddle.net/t56tmy7p/1
sorry, ja, ich hatte nicht in meinem original-code (die zusätzlichen Semikolons). Mein Fehler im schnitzte es nach unten und nicht der doppelten Kontrolle. Ich habe korrigiert.

InformationsquelleAutor Josh Burgess

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.