文字背後漸變

我仍在製作一個響應式菜單，並帶有滾動控件。我在菜單上添加了一個漸變，但我想，漸變會出現在我的鏈接前面並隱藏它們。有JSFiddle，你可以測試它。文字背後漸變

在那裏，你可以看到我的菜單

#page .page-nav { 
    background: white -webkit-linear-gradient(left, transparent 50px, red); 
    background-size: 40% 100%; 
    background-repeat: no-repeat; 
    background-position: right; 
}

的任何解決方案，我的梯度CSS，那怎麼辦？

來源

2016-12-05 Daniels Jirgensons

據我所知，

您可以供應商前綴做，它不是在IE瀏覽器的支持（甚至是IE 11）

除非有人知道這裏一更好的辦法要實施它，我會建議針對這個。

body { 
 
    background: #111; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    font-size: 50px 
 
} 
 
.page-nav { 
 
    background: linear-gradient(to right, #900, #999); 
 
    -webkit-background-clip: text; 
 
    -moz-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    -moz-text-fill-color: transparent; 
 
}

<body> 
 
    <p class="page-nav">Sample Sample</p> 
 
</body>

來源

2016-12-05 11:52:32

文字背後漸變

回答

相關問題