Kann ich tun, knock-out-punch-through-Transparenz mit CSS Schriften?
Ich würde gerne wissen, ob es irgendeinen Weg gibt, kann ich 100% Transparenz zu text, damit wir sehen können das Hintergrundbild der Seite innerhalb der Zeichen im text.
also vorstellen, ich habe eine <div>
mit einem weißen hintergrund, und ein hintergrund-Bild auf <body>
. Ich würde gerne den text innerhalb der <div>
so, dass das Hintergrundbild auf <body>
kann durch den text, obwohl der weiße hintergrund auf der <div>
.
Könnte ich wahrscheinlich verwenden einen invertierten Schrift, aber ich würde lieber einen besseren Weg, es zu tun, wenn es einen gibt.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Muss es dynamisch sein? Der einzige Weg dazu ist mit ein Bild mit Transparenz (GIF-oder besser PNG).
Ich bin mir nicht sicher, ob dies ist, was Sie wollen, aber erklären Sie es sowieso.
Situation: Sie haben einen nicht einfachen hintergrund, dass Sie wollen Biene gesehen, die durch Ihren text.
Lösung: keine CSS-kommt die Rettung für diese. Sie müssen verwenden Sie Ihre treuen Bild-editor, um eine neue Ebene erstellen mit text, und eine andere Schicht, wird die negative in Ihrem text
Damit könnte man einige interessante Wirkungen, aber wenn Sie wollen, dass es dynamisch sein, müssen Sie zum generieren der Bilder on-the-fly serverside.
Diese Art von Tricks ist derzeit unmöglich, mit reinem CSS (vielleicht mit Javascript).
Bearbeiten
Sehen Paul ' s finden Sie auf webkit hat mir denken, wie Sie gefälschte, dass das Verhalten in Firefox, Opera und IE. So weit ich ' ve hatte viel Glück mit dem
canvas
element auf Firefox, und ich versuche zu finden, einige Verhalten infilter:progid:DXImageTransform.Microsoft
.Bisher mit
canvas
dies ist, was ich Tatdurch die Verwendung eines detination-out-compositing und zeichnen von text auf der
canvas
.Ich bin mir nicht genau klar, was du fragst (100% Transparenz bedeutet, dass etwas ist unsichtbar, und die unsichtbaren text nicht in der Regel eine gute Idee), aber im Allgemeinen:
CSS
opacity
Eigenschaft gilt für ein gesamtes element, und nicht nur text. Also, wenn Sie diese HTML:Und das CSS:
Dann sowohl seinen hintergrund und seine Texte werden mit 50% Deckkraft.
rgba
Farbwerte können Sie angeben, semi-transparente Farben. Also, wenn Sie diesen HTML:Und das CSS:
Dann nur seinen text, werden mit 50% Deckkraft.
Ich denke
rgba
Farbe Werte werden unterstützt durch etwas weniger surft, alsopacity
.Ah — wenn du redest, "punch-through" - Transparenz, Nein, nicht die CSS tun.
Außer WebKit (die rendering-engine in Safari und Chrome), das hat eine völlig benutzerdefinierte, made-up-by-Dave Hyatt, nicht-auch-in-CSS-3-Eigenschaft Wert,
-webkit-background-clip: text;
.Kein anderen anderen browser als Safari und Chrome unterstützt.
filter:progid:DXImageTransform.Microsoft
, die Sie nutzen könnten. FF-Sie könnten in der Lage sein zu tun, einige Canvas-oder SVG-Tricks.Können Sie sich Zeit, um Ihren eigenen font mit InkScape und IcoMoon und einen negativen ausgeschlagen schriftart, dann werden Ihre Briefe finden Sie Trog! Ich habe diese Technik für einige sehen Trog Symbole.
Warum nicht versuchen, die DIV-hintergrund-Bild für ein komplett transparentes GIF?
http://www.pageresource.com/dhtml/csstut9.htm
Mit ein .png ohne hintergrund ist eine gute Methode. In Photoshop können Sie speichern für das web.
oder in css: