Warum nicht versuchen, das Hintergrundbild des DIV zu einem vollständig transparenten GIF zu machen?
Ich würde gerne wissen, ob es eine Möglichkeit gibt, 100% Transparenz auf Text anzuwenden, so dass wir das Hintergrundbild der Seite innerhalb der Zeichen im Text sehen können.
d. Stellen Sie sich vor, ich habe ein <div> mit einem weißen Hintergrund und ein Hintergrundbild auf <body> . Ich möchte den Text in <div> setzen, damit das Hintergrundbild in <body> trotz des weißen Hintergrunds in <div> durch den Text gesehen werden kann.
Ich könnte wahrscheinlich eine umgekehrte Schriftart verwenden, aber ich würde einen besseren Weg bevorzugen, wenn es einen gibt.
Muss es dynamisch sein? Die einzige Möglichkeit ist ein Bild mit Transparenz (GIF oder besser PNG).
Ich bin mir nicht sicher, ob das das ist, was du willst, aber ich werde es trotzdem erklären.
Situation: Sie haben einen nicht normalen Hintergrund, den Sie durch Ihren Text sehen möchten.
Lösung: Dafür gibt es kein CSS. Sie müssen Ihren vertrauenswürdigen Bild-Editor verwenden, um eine Ebene mit Text zu erstellen, und eine weitere Ebene, die das Negativ Ihres Textes sein wird
Dies könnte Ihnen erlauben, einige interessante Effekte zu haben, aber wenn Sie möchten, dass es dynamisch ist, müssen Sie die Bilder auf der Fly-Server-Seite erzeugen.
Diese Art von Tricks ist derzeit mit reinem CSS nicht möglich (möglicherweise mit Javascript möglich).
Als ich Pauls Fundstück auf Webkit sah, dachte ich darüber nach, wie ich dieses Verhalten fälschen könnte Firefox, Opera und IE. Bisher hatte ich viel Glück mit dem canvas -Element in Firefox, und ich versuche es zu finden etwas Verhalten in filter:progid:DXImageTransform.Microsoft .
Bisher mit canvas , das habe ich gemacht
mit einem Distinktions-Compositing und Zeichnen von Text in canvas .
Ich bin nicht genau klar, was Sie fragen (100% Transparenz bedeutet, dass etwas unsichtbar ist, und unsichtbarer Text ist im Allgemeinen keine großartige Idee), aber im Allgemeinen:
Die Eigenschaft CSS opacity gilt für ein ganzes Element, nicht nur für den Text. Also, wenn Sie diesen HTML haben:
Und dieses CSS:
%Vor%Dann haben sowohl der Hintergrund als auch der Text eine Deckkraft von 50%.
rgba -Farbwerten können Sie halbtransparente Farben festlegen. Also, wenn Sie diesen HTML haben:
Und dieses CSS:
%Vor%Dann hat nur sein Text eine Deckkraft von 50%.
Ich denke, rgba color Werte werden durch etwas weniger Browse als opacity unterstützt.
Ah - wenn Sie von "Punch-Through" -Transparenz sprechen, nein, CSS tut das nicht.
Mit Ausnahme von WebKit (die Rendering-Engine in Safari und Chrome), die über einen völlig benutzerdefinierten Wert für Dave-Hyatt, nicht-sogar-in-CSS-3-Eigenschaften verfügt , -webkit-background-clip: text; .
Kein anderer Browser als Safari und Chrome unterstützt dies.
Sie können die Zeit nutzen, um mit InkScape und IcoMoon Ihre eigene Schriftart zu erstellen und eine auszuschließende Schrift zu erstellen. Dann können Sie Ihre Buchstaben sehen! Ich habe diese Technik für einige Icons verwendet.
Ich bin nicht genau klar, was Sie fragen (100% Transparenz bedeutet, dass etwas unsichtbar ist, und unsichtbarer Text ist im Allgemeinen keine großartige Idee), aber im Allgemeinen:
Die Eigenschaft CSS %code% gilt für ein ganzes Element, nicht nur für den Text. Also, wenn Sie diesen HTML haben:
%Vor%Und dieses CSS:
%Vor%Dann haben sowohl der Hintergrund als auch der Text eine Deckkraft von 50%.
%code% -Farbwerten können Sie halbtransparente Farben festlegen. Also, wenn Sie diesen HTML haben:
%Vor%Und dieses CSS:
%Vor%Dann hat nur sein Text eine Deckkraft von 50%.
Ich denke, %code% color Werte werden durch etwas weniger Browse als %code% unterstützt.
Warum nicht versuchen, das Hintergrundbild des DIV zu einem vollständig transparenten GIF zu machen?
Eine PNG ohne Hintergrund ist eine gute Methode. In Photoshop können Sie für das Web speichern.
oder in css:
%Vor%Ah - wenn Sie von "Punch-Through" -Transparenz sprechen, nein, CSS tut das nicht.
Mit Ausnahme von WebKit (die Rendering-Engine in Safari und Chrome), die über einen völlig benutzerdefinierten Wert für Dave-Hyatt, nicht-sogar-in-CSS-3-Eigenschaften verfügt , %code% .
Kein anderer Browser als Safari und Chrome unterstützt dies.
Muss es dynamisch sein? Die einzige Möglichkeit ist ein Bild mit Transparenz (GIF oder besser PNG).
Ich bin mir nicht sicher, ob das das ist, was du willst, aber ich werde es trotzdem erklären.
Situation: Sie haben einen nicht normalen Hintergrund, den Sie durch Ihren Text sehen möchten.
Lösung: Dafür gibt es kein CSS. Sie müssen Ihren vertrauenswürdigen Bild-Editor verwenden, um eine Ebene mit Text zu erstellen, und eine weitere Ebene, die das Negativ Ihres Textes sein wird
Dies könnte Ihnen erlauben, einige interessante Effekte zu haben, aber wenn Sie möchten, dass es dynamisch ist, müssen Sie die Bilder auf der Fly-Server-Seite erzeugen.
Diese Art von Tricks ist derzeit mit reinem CSS nicht möglich (möglicherweise mit Javascript möglich).
Als ich Pauls Fundstück auf Webkit sah, dachte ich darüber nach, wie ich dieses Verhalten fälschen könnte Firefox, Opera und IE. Bisher hatte ich viel Glück mit dem %code% -Element in Firefox, und ich versuche es zu finden etwas Verhalten in %code% .
Bisher mit %code% , das habe ich gemacht
%Vor%mit einem Distinktions-Compositing und Zeichnen von Text in %code% .
Ich würde gerne wissen, ob es eine Möglichkeit gibt, 100% Transparenz auf Text anzuwenden, so dass wir das Hintergrundbild der Seite innerhalb der Zeichen im Text sehen können.
d. Stellen Sie sich vor, ich habe ein %code% mit einem weißen Hintergrund und ein Hintergrundbild auf %code% . Ich möchte den Text in %code% setzen, damit das Hintergrundbild in %code% trotz des weißen Hintergrunds in %code% durch den Text gesehen werden kann.
Ich könnte wahrscheinlich eine umgekehrte Schriftart verwenden, aber ich würde einen besseren Weg bevorzugen, wenn es einen gibt.
Eine PNG ohne Hintergrund ist eine gute Methode. In Photoshop können Sie für das Web speichern.
oder in css:
%Vor%Tags und Links css transparency opacity