Transparente Schrift auf transparentem Hintergrund

Question

Ich arbeite gerade an einer Bildlaufleiste, die genau wie this aussieht. Wenn Ihnen dieser Text zu lang ist, springen Sie einfach zum Beispiel!

Es wird links und rechts Pfeile geben, um entweder nach links oder nach rechts zu scrollen. Die Farbe der Bildlaufleiste ist nicht grau, wie es scheint, aber rgba (0,0,0,0,6). Es ist also ein transparentes Schwarz, das vor Bildern verwendet wird.

Jetzt möchte ich die letzten paar Buchstaben in der Zeile ausblenden wie in this Beispiel. Um das zu erreichen, dass ich einen div Overlay bin mit mit:

background-image: linear-gradient(to right, rgba(255,255,255,0), black) 

Aber wenn ich das mit einem transparenten scrollmenu tun würde, würde es die Hintergrundfarbe der scrollmenu mess up (falls Sie nicht wissen, was ich meine schau here).

Also habe ich eine Lösung gefunden, indem ich zwei Divs mit linearen Farbverläufen ganz rechts kombiniert habe, die, wenn man sie übereinander legt, genau die Hintergrundfarbe des scrollmenüs erzeugen. Einer davon liegt hinter der Schrift, einer überlagert die Schrift. Auf diese Weise kann ich Transparenz in der Schriftart erzielen. Hier ist ein Beispiel für euch:

#rightPart, #leftPart{ 
 
    width:200px; height:50px; 
 
    position:absolute; top:0;left:0; 
 
    color: white; 
 
} 
 
#rightPart{ 
 
    z-index:-1; 
 
    background:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
 
    
 
} 
 
#leftPart{ 
 
    background:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
 
}

<div id="rightPart"> Slight Transparency effect on this </div> 
 
<div id="leftPart"></div>

Das Problem ist, dass die Transparenz-Effekt beschränkt sich auf die Hintergrundtransparenz von 0,5. Daher kann der Transparenzeffekt nicht so stark werden, wie ich es möchte.

Jetzt bitte ich um eine Lösung, mit der ich einen stärkeren Transparenzeffekt erreichen könnte. Ich würde Ihre Vorschläge schätzen.

Bitte beachten Sie, dass ich ein bestimmtes Wort am Ende nicht transparent machen kann, da am Ende der Bildlaufleiste immer ein anderes Wort steht! Folglich müsste ich die Schrift selbst in einem bestimmten Bereich transparent machen. Und ich persönlich weiß nicht, wie man das macht (vor allem, wenn es mit den neuesten Browserversionen arbeiten soll - einschließlich IE9 +).

Answer 1

<svg> Filter sind genau das, was Sie suchen.
IE9 hier, um Ihren Tag CAN I USE IT?

Jetzt ruinieren die Filter einfach die einzustellen innerhalb des linearGradiant der Anschlagelemente versetzt ändern.
offset, um zu bestimmen, wo der Effekt
stop-color und stop-opacity stattfindet, um zu bestimmen, was die Wirkung

example: 
 
<br> 
 
<svg height="40" width="200" viewbox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <linearGradient id="endfade" x1="0%" y1="0%" x2="100%" y2="0"> 
 
     <stop offset="50%" stop-opacity="1" /> 
 
     <stop offset="90%" stop-opacity="0" /> 
 
    </linearGradient> 
 
    </defs> 
 
    <text id="spesial" fill="url(#endfade)" x="0" y="15">Your text here</text> 
 
</svg> 
 
<br>Color? 
 
<br> 
 
<svg height="40" width="200" viewbox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <linearGradient id="pinkblue" x1="0%" y1="0%" x2="100%" y2="0"> 
 
     <stop offset="25%" stop-opacity="1" stop-color="pink" /> 
 
     <stop offset="50%" stop-opacity="1" stop-color="aqua" /> 
 
     <stop offset="90%" stop-opacity="0" stop-color="aqua" /> 
 
    </linearGradient> 
 
    </defs> 
 
    <text id="spesial" fill="url(#pinkblue)" x="0" y="15">Your text here</text> 
 
</svg>

für Ihren Vorschlag

Answer 2

Nun, ich kann keine Lösung mit voller Browserunterstützung anbieten. Aber da es keine andere Antwort gibt, kann es nützlich sein

Zuerst erstellen wir ein Basis-Div, das die halbtransparente Farbe enthält. Darüber legen wir ein div mit dem Text. überlagert von einem Gradienten von transparent bis grau. Das macht die rechte Seite des Div vollständig grau. Der Trick besteht darin, für diese div einen Mix-Blend-Modus von Hard-Light einzustellen. Dies macht grau verhalten sich wie transparent, halten schwarz wie schwarz

#base { 
 
    left: 0px; 
 
    width: 200px; 
 
    height: 50px; 
 
    position: relative; 
 
    background: rgba(0,0,0,0.5); 
 
} 
 

 
#text { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    mix-blend-mode: hard-light; 
 
} 
 

 
#text:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: linear-gradient(90deg, transparent 30%, gray 80%); 
 
} 
 
#base:nth-child(2) { 
 
    background: rgba(0,0,0,0.25); 
 
} 
 
#base:nth-child(3) { 
 
    background: rgba(0,0,0,0.125); 
 
}

<div id="base"> 
 
    <div id="text"> Slight Transpareny effect on this </div> 
 
    </div> 
 
    <div id="base"> 
 
    <div id="text"> Slight Transpareny effect on this </div> 
 
    </div> 
 
    <div id="base"> 
 
    <div id="text"> Slight Transpareny effect on this </div> 
 
    </div>