透明背景上的透明字體

Question

我目前正在開發一個看起來像這樣的滾動條。 如果這篇文章很長，你只需跳到示例！

左側和右側將有箭頭向左或向右滾動。 滾動條的顏色看起來不是灰色的，而是rgba（0,0,0,0.6）。 因此它是一個透明的黑色，將用於圖像前面。

現在我希望該行中的最后幾個字母在此示例中淡出。 要實現這一點，我使用div覆蓋：

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

但是如果我用透明的滾動菜單來做，那就會搞亂滾動菜單的背景顏色（如果你不知道我的意思，請看這里 ）。

所以我找到了一個解決方案，它將兩個div與最右邊的線性漸變相結合，如果你將它們疊放在一起，就可以精確地創建滾動菜單的背景顏色。 其中一個位於字體后面，其中一個覆蓋了字體。 這樣我就可以在字體上實現一些透明度。 這是你們的一個例子：

 #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> 

問題是透明效果僅限於0.5的背景透明度。 因此，透明效果不能像我希望的那樣強烈。

現在我要求一個解決方案，我可以用它來實現更強的透明效果。 我很感激你的建議。

請記住，我不能只在最后透明地創建一個特定的單詞，因為在滾動條的末尾總會有一個不同的單詞！ 因此，我需要使字體本身在特定區域透明。 我個人不知道該怎么做（特別是如果它應該適用於所有最新的瀏覽器版本 - 包括IE9 +）。

Answer 1

<svg>過濾器正是您所尋求的。
IE9在這里毀了你的一天我可以使用它嗎？

現在要調整過濾器，只需更改linearGradiant中停止元素的偏移量。
offset以確定效果發生的位置
stop-color和stop-opacity以確定效果應該是什么

 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> 

Answer 2

好吧，我無法提供完全支持瀏覽器的解決方案。 但由於沒有任何其他答案，可能會有用

首先，讓我們創建一個基本div，它將保持半透明顏色。 在它上面，讓我們用文本設置div。 由透明到灰色的漸變覆蓋。 這使得div的右側完全變灰。 訣竅是為這個div設置一個混合混合模式的強光。 這使得灰色表現為透明，黑色保持黑色

 #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>