Ich arbeite gerade an einer Bildlaufleiste, die genau so aussieht wie dies . Wenn dieser Text zu lang ist, springen Sie einfach zum Beispiel!
Auf der linken und rechten Seite befinden sich Pfeile, mit denen Sie entweder nach links oder rechts blättern können. 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.
Nun möchte ich, dass die letzten Buchstaben in der Zeile wie in diesem Beispiel ausgeblendet werden. Um das zu erreichen, verwende ich ein Div-Overlay mit:
%Vor%Aber wenn ich das mit einem transparenten scrollmenü machen würde, würde das die Hintergrundfarbe des scrollmenüs stören (wenn du nicht weißt was ich meine, schau hier ).
Also habe ich eine Lösung gefunden, indem ich zwei divs mit linearen Verläufen ganz rechts kombiniert habe, die, wenn Sie übereinander gelegt werden, 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:
Das Problem ist, dass der Transparenzeffekt auf die Hintergrundtransparenz von 0,5 beschränkt ist. 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 erzielen könnte. Ich würde mich über Ihre Vorschläge freuen.
Bitte denkt daran, 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 ich das machen soll (vor allem, wenn es an all den neuesten Browserversionen arbeiten soll - einschließlich IE9 +).
& lt; svg & gt; Filter sind genau das, wonach Sie suchen.
IE9 hier, um Ihren Tag zu ruinieren KANN ICH ES VERWENDEN?
Um nun den Filter anzupassen, ändern Sie einfach den Offset der Stop-Elemente innerhalb des linearGradiant.
offset um zu bestimmen, wo der Effekt stattfindet
stop-color und stop-opacity um zu bestimmen, wie der Effekt sein soll
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 fest. überlagert von einem Gradienten von transparent bis grau. Das macht die rechte Seite des Div vollständig grau. Der Trick besteht darin, für diesen div einen Mix-Blend-Modus von Hard-Light einzustellen. Dadurch verhält sich Grau so transparent, dass Schwarz schwarz bleibt.
Tags und Links css fonts overflow transparency