我正在使用渐变来设置一个元素的背景颜色。问题是,我也有一个“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);
}
最佳答案
您需要使用background-image
定义gradients
,使用background-color
定义plain 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);
}
关于html - 悬停时从渐变背景过渡到非渐变背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31459726/