我试图在悬停时用css过渡缩略图，这样在悬停时，背景渐变就会淡入。转换没有工作，但如果我简单地将其更改为rgba()值，它就可以工作。不支持渐变吗?我也尝试使用图像，它也不会过渡图像。
我知道这是可能的，因为在另一篇文章中有人做到了，但我不知道具体是怎么做到的。这里有一些CSS工作:
#container div a {
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
position: absolute;
width: 200px;
height: 150px;
border: 1px #000 solid;
margin: 30px;
z-index: 2
}
#container div a:hover {
background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}
::之前，CSS伪元素可以很容易地做到这一点!
.element {
位置:相对;
宽度:200 px;
身高:150 px;
背景图像:线性梯度(45度，蓝色，水);
z - index: 2;
｝
{前.element::
位置:绝对的;
内容:“”;
插图:0;/*与{top: 0相同;右:0;底部:0;左:0;}* /
背景-图像:线性梯度(底部，红色，橙色);
z - index: 1;
透明度:0;
过渡:不透明度0.25s线性;
｝
{前.element:徘徊::
透明度:1;
｝
身体< >
< div class = "元素" > < / div >
身体< / >
你所要做的就是使用::before不透明度为零的伪元素。
打开:悬停，切换::before的不透明度为1，如果你遵循几个简单的步骤，你应该可以让你的过渡工作。
使用background-image设置元素的背景渐变
在不透明度为0的伪元素之前使用::来设置下一个渐变
设置不透明度为1 inside:hover::before
确保你的::before有:
绝对位置
内容:“
比默认元素更低的z-index
顶部，底部，左侧和右侧为零(或简单地插入:0)
过渡目标不透明度与您的偏好的时间间隔
就是这样!现在你应该可以用你喜欢的任何持续时间/延迟/计时函数来调整你的过渡!
基于你的问题中的css代码，我已经尝试代码如下，它为我工作(运行代码片段)，请自己尝试:
#container div a {
display: inline-block;
margin-top: 10%;
padding: 1em 2em;
font-size: 2em;
color: #fff;
font-family: arial, sans-serif;
text-decoration: none;
border-radius: 0.3em;
position: relative;
background-color: #ccc;
background-image: linear-gradient(to top, #C0357E, #EE5840);
-webkit-backface-visibility: hidden;
z-index: 1;
}
#container div a:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.3em;
background-image: linear-gradient(to top, #6d8aa0, #343436);
transition: opacity 0.5s ease-out;
z-index: 2;
opacity: 0;
}
#container div a:hover:after {
opacity: 1;
}
#container div a span {
position: relative;
z-index: 3;
}
<div id="container"><div><a href="#"><span>Press Me</span></a></div></div>
基于你的问题中的css代码，我已经尝试代码如下，它为我工作，请自己尝试:
#container div a {
display: inline-block;
margin-top: 10%;
padding: 1em 2em;
font-size: 2em;
color: #fff;
font-family: arial, sans-serif;
text-decoration: none;
border-radius: 0.3em;
position: relative;
background-color: #ccc;
background-image: linear-gradient(to top, #C0357E, #EE5840);
-webkit-backface-visibility: hidden;
z-index: 1;
}
#container div a:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.3em;
background-image: linear-gradient(to top, #6d8aa0, #343436);
transition: opacity 0.5s ease-out;
z-index: 2;
opacity: 0;
}
#container div a:hover:after {
opacity: 1;
}
#container div a span {
position: relative;
z-index: 3;
}
这对你有用吗?
根据您的需要更改颜色:)
::之前，CSS伪元素可以很容易地做到这一点!
.element {
位置:相对;
宽度:200 px;
身高:150 px;
背景图像:线性梯度(45度，蓝色，水);
z - index: 2;
｝
{前.element::
位置:绝对的;
内容:“”;
插图:0;/*与{top: 0相同;右:0;底部:0;左:0;}* /
背景-图像:线性梯度(底部，红色，橙色);
z - index: 1;
透明度:0;
过渡:不透明度0.25s线性;
｝
{前.element:徘徊::
透明度:1;
｝
身体< >
< div class = "元素" > < / div >
身体< / >
你所要做的就是使用::before不透明度为零的伪元素。
打开:悬停，切换::before的不透明度为1，如果你遵循几个简单的步骤，你应该可以让你的过渡工作。
使用background-image设置元素的背景渐变
在不透明度为0的伪元素之前使用::来设置下一个渐变
设置不透明度为1 inside:hover::before
确保你的::before有:
绝对位置
内容:“
比默认元素更低的z-index
顶部，底部，左侧和右侧为零(或简单地插入:0)
过渡目标不透明度与您的偏好的时间间隔
就是这样!现在你应该可以用你喜欢的任何持续时间/延迟/计时函数来调整你的过渡!
一种解决方案是使用背景位置来模拟梯度过渡。
几个月前，Twitter Bootstrap就使用了这个解决方案。
更新
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
这里有一个简单的例子:
链接状态
.btn {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
font-weight: 300;
position: relative;
display: inline-block;
text-decoration: none;
color: #fff;
padding: 20px 40px;
background-image: -moz-linear-gradient(top, #50abdf, #1f78aa);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa));
background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa);
background-image: -o-linear-gradient(top, #50abdf, #1f78aa);
background-image: linear-gradient(to bottom, #50abdf, #1f78aa);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0);
background-repeat: repeat-y;
background-size: 100% 90px;
background-position: 0 -30px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
悬停状态
.btn:hover {
background-position: 0 0;
}
