文字背后渐变

我仍在制作一个响应式菜单，并带有滚动控件。我在菜单上添加了一个渐变，但我想，渐变会出现在我的链接前面并隐藏它们。有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

文字背后渐变

回答

相关问题