CSS: Schabloneneffekt

Question

CSS: Schabloneneffekt

8

Ich frage mich, ob es in reinem CSS möglich ist, einen Schabloneneffekt zu haben: Ein Block mit einer Hintergrundfarbe und einer Farbe "transparent", die den Hintergrund des übergeordneten Blocks anzeigen würde.

Beispiel: Ich habe einen übergeordneten Block mit einem Farbverlauf oder Muster als Hintergrund, und ich möchte einen Block mit einem schwarzen Hintergrund überlagern, bei dem der Textinhalt den Gradienten des übergeordneten Blocks verlassen würde .

Ich habe keinen Weg gefunden, dies zum Laufen zu bringen, aber vielleicht hat jemand eine Idee oder einen Tipp?

BEARBEITEN

Entschuldigung, ich sollte nicht genau genug sein.

Hier ist ein Bild des gewünschten Ergebnisses:

css css3 mask

sacripant 23.04.2012, 15:05

quelle

5 Antworten

Tags und Links css css3 mask

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie groß ist die Meteor-Session?

score 4 · Answer 1

4

Vielleicht können Sie CSS3 background-clip verwenden. schreibe so:

HTML

%Vor%

CSS

%Vor%

Überprüfen Sie dies Ссылка

sandeep 23.04.2012 16:37

quelle

score 1 · Answer 2

1

Etwas, das eine eingebettete Schriftart verwendet, wie z. B. Ссылка , entspricht möglicherweise weitgehend Ihren Vorstellungen. Durch Ändern der Hintergrund- und Textfarben sollten Sie erhalten, was Sie suchen

ChrisW 23.04.2012 15:08

quelle

score 1 · Answer 3

1

%Vor%

Dies setzt die Deckkraft des div oder was auch immer Sie es anwenden 40% seiner ursprünglichen Deckkraft (die in der Regel 100% ist, es sei denn Sie .png oder .gif Bilder mit reduzierter Deckkraft bereits anwenden)

Grigor 23.04.2012 15:58

quelle

score 1 · Answer 4

Soweit ich weiß, können Sie SVG dafür verwenden, aber es wird nicht trivial sein.

Dies (und dies ) könnte die nächste Implementierung dessen sein, was Sie brauchen. Das Problem ist, dass es nicht in jedem Browser gleich funktioniert, obwohl Sie vielleicht tiefergehende Recherchen durchführen können.

Upd : Lea Verou hat in ihrem Artikel eine einfache und elegante Lösung vorgestellt: Textmaskierung - Der Standard Weg

score 0 · Answer 5

0

Sie können mit der Eigenschaft CSS3 text-shadow spielen.

%Vor%

Siehe mein Beispiel hier .

Detaillierte Informationen über die Eigenschaft hier .

Robin Maben 23.04.2012 15:34

quelle