Ausrichten eines transparenten PNG über gleichfarbigen CSS-Hintergrund

Question

Meine Idee ist, dass ein PNG überlagert einige Text, mit Transparenz von 0% bis 100%, alle in der gleichen Farbe wie der CSS-Hintergrund gefärbt, würde den zugrunde liegenden Text ausblenden es.

Stellt sich heraus das transparente PNG ist auch in den Bereichen sichtbar, wo es transparent sein soll. Außerdem sind die Farben von PNG und CSS nicht gleich - obwohl ich sie mit den gleichen Hex-Werten erzeuge.

Ein Bild ist enthalten. Ich habe versucht, die Ressource in Illustrator, Photoshop und Fireworks zu erstellen. Ich habe versucht, die Gamma-Informationen (GAMA) mit PNGcrush, PNGSquash und ImageMagick zu entfernen. Das Problem ist bei Firefox das gleiche wie bei Safari.

Wenn jemand weiß, wie man das löst - oder wenn es überhaupt möglich ist - würde ich es gerne hören! Vielen Dank im Voraus.

Answer 1

ich das Problem nicht sofort lösen kann Sie erleben, aber ich kann eine alternative Text-Fading-Lösung bieten, wenn das irgend ist?

.text-to-fade {color: rgba(255,255,255,0.0) /* red: 255, green: 255, blue: 255, alpha: 0 */ 
       } 

der Wert 0.0 am Ende ist der Alpha-Wert und von 01 reichen, mit 0 lichtundurchlässig und 1 transparent zu sein. rgba hat Probleme mit anderen Browsern als Firefox, soweit ich experimentiert habe. vielleicht

.text-to-fade {opacity: 0.5; /* for most browsers */ 
       filter: alpha(opacity=50); /* for IE */ 
       } 

Answer 2

Der Grund ist es eine andere Farbe zu sein scheint, weil es transparent ist, nicht, weil die Farben tatsächlich unterschiedlich sind. Öffnen Sie dazu einen Bildeditor, der Ebenen unterstützt. Erstellen Sie eine weiße untere Schicht und eine schwarze obere Schicht. Setzen Sie die Deckkraft der schwarzen Ebene auf 50% und fügen Sie die Ebenen zusammen. Verwenden Sie einen Farbwähler, um die Farbe zu überprüfen. Es wird # 808080 sein, nicht schwarz.

Der Grund, warum es nicht verblasst, ist, dass diese Farbe additiv ist. Nehmen wir an, Ihr Text ist # 808080: An Stellen, an denen Text vorhanden ist, haben Sie # 808080 überlagert # 808080 - und das ist eher so etwas wie # 424242, als dass Sie es abbrechen, wie Sie wollen. Es gibt wirklich keine großartige Möglichkeit, was Sie in einem Webbrowser in nur einem Schritt zu tun versuchen.

Eine Sache zu tun wäre, den Text unsichtbar zu machen (Sichtbarkeit: versteckt;) mit Javascript. Eine andere Möglichkeit wäre, relative oder absolute Positionierung zu verwenden und die z-Indizes so einrichten, die Dinge in etwa so aussehen:

• 3: TRANSPARENT-GRAY
• 2: Taste/sonstige Gegenstände
• 1: OPAQUE-GRAY
• 0: Text

, dass der Text wird blockieren, und alles andere, teilweise sichtbar lassen.