Ich versuche, einen Hover-Over-Effekt zu erstellen, bei dem ein Bild in voller Farbe beginnt, und wenn ich den Mauszeiger über das Bild halte, möchte ich, dass es ein blaues Overlay hat.
Die Sache ist, mit nur einem einfachen blauen Overlay, es ist nur ein halbtransparenter blauer Block auf ein Farbbild ... was bedeutet, dass andere Farben durch ein wenig zeigen. Was ich möchte ist, dass das Bild einfach nur Blautöne ist.
Nun habe ich es geschafft, dass ein Bild in Graustufen umgewandelt wird, und ich habe ein blaues Overlay erhalten, aber gibt es eine Möglichkeit, CSS dazu zu bringen, die Effekte zu stapeln? Drehen Sie das Bild in Graustufen und multiplizieren Sie dann die Farbe.
Der einfachere Weg ist wahrscheinlich, den Effekt nur als Rasterbild zu erstellen und dann nur Bilder zu ändern, aber es wäre schön, wenn es stattdessen in Code gemacht werden könnte.
Ich denke, Sie suchen nach CSS filter property . Siehe David Walshes Demo hier: Ссылка
Es ist derzeit experimentell und wird nur von Webkit unterstützt, denke ich, aber es ist der einzige Weg, dies mit CSS zu erreichen.
Sie können auch benutzerdefinierte Adobe CSS-Filter anzeigen: Ссылка
Eine Demo von etwas, von dem ich glaube, dass Sie es tun möchten : Ссылка (aus diesem Thema: < a href="https://stackoverflow.com/questions/17721960/css-image-overlay-with-color-and-transparency"> CSS-Bildüberlagerung mit Farbe und Transparenz )