时间戳

首页 > 解决方案 > 如何在背景和文本上应用不同的渐变

html - 如何在背景和文本上应用不同的渐变

问题描述

我在 CSS 中使用带有 webkit 渐变效果的背景颜色

.show {
  background: rgb(242,242,242);
  background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(222,222,222,1) 52%, rgba(193,193,193,1) 100%);
  opacity: 0.4;
  border-bottom: 2px solid #E4E9ED;
}

这很好用，但是一旦我尝试将悬停时的渐变添加到.show带有<a>标签到文本的类中，它就无法工作：

@media (-webkit-min-device-pixel-ratio:0) {
.navigation-bar .show li a:hover{
  background-color: orange;
  color: transparent;
  -webkit-transition: .1s .2s;
  -webkit-background-clip: text;
  background-image: -webkit-linear-gradient(left, #c41316 1%,#e00003, transparent 50%); /*-webkit-linear-gradient(left, hotPink 0%, orange 50%, transparent 50%);*/
  background-position: 100% 0;
  background-size: 200% 200%;
}
}

此代码适用于其他文本，但我认为.show渐变背景对.show li a:hover渐变文本有影响。

如何在渐变背景上应用渐变文本？

Codepen（请注意您需要向下滚动才能看到问题）

标签： htmlcss

解决方案

去除background-position: 100% 0;里面

@media (-webkit-min-device-pixel-ratio: 0) .navigation-bar .show li a:hover {...}

我是怎么得出这个结论的？

当您滚动时， this@media (-webkit-min-device-pixel-ratio: 0) .navigation-bar .show li a:hover {...}会覆盖 this @media (-webkit-min-device-pixel-ratio: 0) .navigation-bar li a。当您从前者中一点一点地删除属性时，它会在background-position: 100% 0;删除时起作用。

推荐阅读