如何在CSS中从HEX转换为渐变

Question

如何创建从HEX颜色到渐变色再到渐变色的背景转换？

我的变量--base只是白色，HEX和渐变之间的转换不起作用。

:root {
--app: radial-gradient( circle 753.6px at 10% 20%, rgba(248,167,221,1) 0%, rgba(230,192,254,1) 41%, rgba(169,217,243,1) 90% );
--base: #FFFFFF; /* radial-gradient(#FFFFFF, #FFFFFF) */
}
body {
background: #DDD;
}
div {
height: 100px;
line-height: 100px;
text-align: center;
width: 300px;
background: var(--base);
transition: all 1s ease;
}
div:hover {
background: var(--app);
}

<div>test</div>

当我尝试将-基底更改为径向梯度(#FFFFFF，#FFFFFFF(时，也不起作用。有人能解决这个问题吗？

JSFiddle

Answer 1

我为您创建了一个解决方案：https://jsfiddle.net/axgq60ro/4/为了在这两者之间创建转换，您需要使用z-index技巧。有关更多信息，请查看本文：https://keithjgrant.com/posts/2017/07/transitioning-gradients/祝你今天愉快！

div:hover::before {
opacity: 1;
}