Question

我使用渐变来设置一个元素的背景颜色。问题是，我也有一个“hover”背景，但没有使用渐变。在那一刻，当我将鼠标悬停在具有类.tinted的元素上时，它首先显示没有背景时会闪烁，然后应用rgba(0,0,0,0.65) 是否有任何方式可以直接从后台转换：gradient(left, rgba(0,0,0,0.65), rgba(0,0,0,0.30))到rgba(0,0,0,0.65)？

.tinted {
    transition: background-color 500ms linear;
    background: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}

.tinted:hover {
    background: rgba(0, 0, 0, 0.65);
}

Answer 1

您需要使用gradients定义background-image，将plain color定义为background-color：

.tinted {
    transition: background-color 500ms linear;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}

.tinted:hover {
    background-color: rgba(0, 0, 0, 0.65);
}

DEMO

Answer 2

这是您可以使用的方法：

＆＃13;

#box{
    width: 200px;
    height: 300px;
    background-color: orange;
    background-image: -webkit-linear-gradient(top, crimson 0%, transparent 100%);
    transition: all 1s ease-in-out;
}

#box:hover{
    background-color: crimson;
}

＆＃13;

<div id="box"></div>

＆＃13;

Answer 3

一个可能性是设置一个包含2个部分的渐变，一个颜色在变色，另一个颜色颜色恒定。

并使用background-image.position

更改要显示的渐变部分

.test {
  width: 300px;
  height: 100px;
  background-image: linear-gradient(to right, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.3));
  background-size: 200% 100%;
  background-position: 100% 0%;
  transition: background-position 1s;
  margin: 10px;

}

.test:hover {
  background-position: 0% 0%;
}

#test2 {
  background-image: linear-gradient(to right, blue 50%, red 100%);
}

<div class="test"></div>
<div class="test" id="test2"></div>

悬停时从渐变到非渐变背景的过渡

3 个答案: