文章/答案/技术大牛

发布

社区首页 >问答首页 >文本落后梯度

问文本落后梯度
EN

Stack Overflow用户

提问于 2016-12-05 11:33:03

回答 1查看 180关注 0票数 0

我仍然在做一个响应菜单，与滚动控制。我在我的菜单上添加了一个渐变，但我想，这个梯度在我的链接前面，并隐藏在它后面。有JSFiddle，你可以测试它。

在这里你可以在我的菜单上看到我的渐变CSS

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

有什么解决办法，怎么做？

html

css

overflow

gradient

回答 1

Stack Overflow用户

发布于 2016-12-05 11:52:32

就我所知道,

--您可以在中使用供应商前缀，并且IE中不支持它(甚至IE11)

除非这里有人知道更好地实现，否则建议不要使用。

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40973313

复制

相似问题

问文本落后梯度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本落后梯度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本落后梯度
EN