Question

我正在尝试在悬停时从底部向上或向上底部进行文本颜色更改。

＆＃13;

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, green 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

＆＃13;

<div class="box">Text</div>

＆＃13;

上面的代码使框改变颜色而不是文本。我该怎么做才能使文字颜色而不是框。

Answer 1

你必须使用Background Clip：

＆＃13;

.box {
  width: 200px;
  height: 100px;
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  -webkit-transition: background-position 3s;
  -moz-transition: background-position 3s;
  transition: background-position 3s;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 50pt;
}

.box:hover {
  background-position: 0 -100%;
}

＆＃13;

<div class="box">Text</div>

＆＃13;

注意：我已将字体大小和时间增加到3秒，以便更好地查看效果。

Answer 2

您可以使用背景覆盖（before伪元素）和mix-blend-mode: screen来实现效果：

.box {
  position: relative;
  width: 200px;
  height: 100px;
  font-size: 5em;
  background: white;
}

.box::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  transition: background-position 1s;
  content: '';
  pointer-events: none;
  mix-blend-mode: screen;
}

.box:hover::before {
  background-position: 0 -100%;
}

<div class="box">Text</div>

如何自下而上更改文本的背景颜色

2 个答案: