CSS-Graustufen-filter und background-blend-mode zur gleichen Zeit?

Ich versuche zu behandeln, ein Bild der gleichen Art, wie es ist in eine photoshop-Datei - desaturating das Bild in Graustufen um, und wendet dann eine Farbüberlagerung mit einer Füllmethode "multiplizieren". Zu diesem Zweck bin ich styling ein CSS-hintergrund-Bild mit...

.someclass
{
    /* grayscale */
    -webkit-filter: grayscale(1); 
    filter: gray; 
    filter: grayscale(1);
    filter: url(desaturate.svg#greyscale);

    /* multiply */
    background-color: rgba(190, 50, 50, 0.65);
    background-blend-mode: multiply;
}

Das problem dabei ist, dass die Graustufen-filter landet desaturating rote Farbe für die Füllmethode. In anderen Worten, die mehrfach Auftritt und dann die Graustufen. Wie schalte ich es so, dass die Graustufen zuerst angewendet und dann die Füllmethode angewendet wird zweite?

Habe ich eine Geige (http://jsfiddle.net/g54LcoL1/1/) für den code und ein screenshot (in Photoshop), was würde ich erwarten, dass die die Geige Ergebnis Aussehen soll. Das Unterste Bild div.grayscale.multiply, sollte rot gefärbt.

Das ist unmöglich zu tun, mit CSS AFAIK. Dies ist, weil CSS hat alle seine Maßnahmen in den Matrizen, so wird die Reihenfolge für alle Eigenschaften festgelegt ist. Die alternativen sind zu speichern Sie die Bilder als Graustufen vor der hand oder vielleicht verwenden Sie so etwas wie eine Leinwand auf, einen und dann den anderen
Als 'user' von CSS, es scheint mir, wie die Art und Weise dies geschehen soll, ist die Reihenfolge, von dem Sie deklariert ist in den code. Ich bin sicher, es gibt einen Grund, warum es ist wie es ist, sondern wie background-blend-mode wird mehr breit abgestützt, Leute verlangen mehr Kontrolle über die Reihenfolge der Mischungen/Filter. Ich nehme an canvas ist der Weg zu gehen. Ich werde give it a shot.
Css-bot-zu-Sprache vielleicht war das Ihr problem, ich weiß nicht. Anyways versuchen Pleeeease Spielplatz konvertiert Filter.
Es hat nie eine -moz Präfix filter Eigenschaft. Entfernt es aus der Frage...

InformationsquelleAutor Jeff | 2014-09-14

10

Können Sie es nicht mit filtern, aber Sie können es tun, bleiben mit den blend-Modus für alles

den Graustufen-äquivalent in der Mischung ist die Leuchtkraft, mit der Bild als Quelle und einem festen weißen hintergrund

Also das hintergrund-Bilder, von oben nach unten, sind:
1. weiß (als hintergrund-Farbe)
2. Ihr Bild
3. solid red (muss angegeben werden, da ein gradient für jetzt)
- und die Füllmethoden sind Leuchtkraft und multiplizieren

CSS:
```
.test {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(0deg, red, red), url("http://cuteoverload.files.wordpress.com/kitteh_puddle-1312.jpg");
  background-color: white;
  background-blend-mode: multiply, luminosity;
  background-size: cover;
}
```
HTML:
```
<div class="test"></div>
```
- So eine fantastische Lösung. Wenn Safari unterstützt die Leuchtkraft hintergrund-Mischmodus ich würde im Himmel sein jetzt.
- Ich habe tatsächlich diese arbeiten, die auch in Safari mit der mix-blend-mode Eigentum und filter: grayscale(100%) auf dem Foto. Woo! css-tricks.com/almanac/properties/m/mix-blend-mode
InformationsquelleAutor vals
2

Den Mischmodus angewendet wird, um die hintergrund-Ebenen, und der filter wird angewendet, um das gesamte element, Sie sind also sozusagen um zwei unterschiedliche Dinge: mit der Zeit, dass der hintergrund berechnet (einschließlich der red-ish Aussehen), das ganze element wird in Graustufen umgewandelt, mit dem filter.

Es ist ein Vorschlag für die filter() Funktion für Bild-Verweise, so in der Theorie, Sie sollten in der Lage sein, einen filter anzuwenden, zu jedem Bild, wie es geladen wird. Ich denke, das ist die Idee:
```
.someclass {
    background-image: filter(cat.jpg, grayscale(100%));
    background-color: red;
    background-blend-mode: multiply;
}
```
Leider, ich glaube nicht, dass dies umgesetzt wird überall noch, es ist nur in der draft-version der Filter spec.

Im Allgemeinen die Reihenfolge von Operationen in Bezug auf diese Arten von "post-processing" CSS-Effekte definiert ist, in der gleichen Reihenfolge wie für die SVG:
die Filterung erfolgt zuerst, dann abschneiden, dann maskieren, dann mischen.

(Siehe Mischung & Compositing Spec.) Also, es gibt nichts, was Sie tun können, in Bezug auf die änderung, dass ich Angst habe.

InformationsquelleAutor Emil
1

Als Joel erwähnt in seinem Kommentar unter der Antwort akzeptiert, ist es möglich, dies zu tun mit mix-blend-mode.

In meinem Beispiel benutze ich ein Bild, statt ein Hintergrundbild. Wenn es ein Hintergrundbild, können Sie immer noch verwenden Sie die gleiche Technik. Ersetzen Sie einfach das Bild mit einem leeren div, das hat Hintergrundbild styling.

Außerdem werde ich den "Bildschirm" blend " - Modus statt "multiplizieren", denn es zeigt die Farbe, die Entfernung mehr klar.

Mit Farbe entfernen:

CSS:
```
.image-wrapper {
    background: red;
    display: inline-block;
}

.image-wrapper img {
    mix-blend-mode: screen;
    filter: grayscale(100%);
}
```
HTML:
```
<div class="image-wrapper">
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/>
</div>
```
Ohne Farbe zu entfernen:

CSS:
```
.image-wrapper {
    background: red;
    display: inline-block;
}

.image-wrapper img {
    mix-blend-mode: screen;
}
```
HTML:
```
<div class="image-wrapper">
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/>
</div>
```
Mehr Informationen finden Sie hier:

https://css-tricks.com/almanac/properties/m/mix-blend-mode/

InformationsquelleAutor Daniel Tonon

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.