我正在尝试使用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)))
}
Run Code Online (Sandbox Code Playgroud) 我的标签上的CSS转换不是淡入淡出,它就像没有转换一样!我尝试过使用transition: background 300ms ease-in-out;但仍然没有运气
CSS:
.FeatureRow a{
padding: 10px;
display: block;
width: 260px;
height: auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 4px 8px #f5f5f5;
-moz-box-shadow: 0px 4px 8px #f5f5f5;
box-shadow: 0px 4px 8px #f5f5f5;
background-image: -moz-linear-gradient(top,#fbfbfb,#ffffff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbfbfb),to(#ffffff));
background-image: -webkit-linear-gradient(top,#fbfbfb,#ffffff);
background-image: -o-linear-gradient(top,#fbfbfb,#ffffff);
background-image: linear-gradient(to bottom,#fbfbfb,#ffffff);
background-repeat: repeat-x;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
}
.FeatureRow a:hover{
background-image: -moz-linear-gradient(top,#C00,#C0F);
background-image: -webkit-gradient(linear,0 …Run Code Online (Sandbox Code Playgroud)