Wie man "durchschauen" Text machen?

Ich habe body mit einem background-image und einem div mit background-color als weiß.Wie man "durchschauen" Text machen?

Ich versuche, den Text auf der div (die #content genannt wird) durchschauen, so dass der Text wie ein Fenster auf den Hintergrund der Website ist.

Hier ist ein Beispiel:

enter image description here

Quelle

2014-10-29 colzu

haben Sie 'Opazität versucht: .4' zum Beispiel? –

Er möchte, dass der Text transparent ist. Sie solutoin würde nur den Hintergrund sichtbarer machen. – RobAu

@KaiQing Das wird nicht funktionieren, siehe sein Beispiel. CSS-Maskierung ist der richtige Weg. – Paul

Was Sie erreichen möchten, ist mit CSS möglich. Mit background-clip: text können Sie einen Hintergrund für den Text verwenden, aber Sie müssen ihn mit dem Hintergrund der Seite ausrichten.

Hier ist ein Beispiel:

body { 
 
    background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat; 
 
    margin: 10px; 
 
    background-position: center top; 
 
} 
 
h1 { 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
    overflow: hidden; 
 
    text-align: center; 
 
    padding: 10px; 
 
    font-weight: bold; 
 
    font-family: arial; 
 
    font-size: 83px; 
 
    margin: 450px 0px 0px 0px; 
 
} 
 
span { 
 
    background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat; 
 
    -webkit-text-fill-color: transparent; 
 
    -webkit-background-clip: text; 
 
    display: block; 
 
    background-position: center -450px; 
 
}

<h1><span>NEW YORK</span></h1>

Quelle

2014-10-29 23:37:00

Sind Sie sicher, dass "background-clip: text" CSS3 und keine Webkit-Erweiterung ist? Die [spec] (http://dev.w3.org/csswg/css-backgrounds/#the-background-clip) listet 'text' nicht als möglichen Wert von' background-clip' auf. – Oriol

'h1's' color' sollte nicht'transparent' sein, da der Text dann auf nicht-webkit Browsern unsichtbar wird. Und Webkit-Browser brauchen es nicht, weil sie '-webkit-text-fill-color: transparent' haben. – Oriol

Ja. Das ist genau das, was ich wollte, danke :) – colzu

Try Clipping für Ihren #content, weist die gleiche Hintergrunddatei (eventuell neu positioniert werden muss):

#content { 
color: rgba(255,255,255,.5); /* Fallback: assume this color ON TOP of image */ 
background: url(image.jpg) no-repeat; 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
}

Quelle: http://css-tricks.com/image-under-text/

Quelle

2014-10-29 23:25:24 Paul

Aber ich sehe durch Ihr Beispiel, was er tatsächlich fragte, also plus eins zu diesem –

Wie man "durchschauen" Text machen?

Antwort

Verwandte Themen