悬停时过渡渐变后的CSS [重复]

Question

我在这里检查了很多其他问题，但找不到我的问题的答案。 我得到了一个带有 :after css 选择器的 div 块，我在其中对图像进行了渐变叠加。 当有人去时，我几乎没有什么不同的渐变叠加：悬停在 div 上

它可以工作并且渐变会发生变化.. 但我无法使用过渡 css 选择器获得这种变化的速度。

这是我的代码..

.fotka-box::after {
background: -moz-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.75))); /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* ie10+ */
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* ie6-9 */

-webkit-transition: all 1350ms ease-in-out;
-moz-transition: all 1350ms ease-in-out;
-o-transition: all 1350ms ease-in-out;
transition: all 1350ms ease-in-out;

display: block;
position: absolute;
top: 0;
right: 0;
height: 370px;
max-height: 100%;
left: 0;
pointer-events: none;
content: '';
}


.fotka-box:hover::after {
background: -moz-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(40%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.75))); /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* ie10+ */
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* w3c */
}

我在这里做错了什么？ 感谢您的任何建议。

PS：我知道我可以使用不透明度，但我想更改渐变颜色和样式。不显示从 0 到 1 的不透明度。

Answer 1

查看此页面以了解 CSS 中的渐变过渡：https://stackoverflow.com/a/6542623/2872279

基本上，渐变目前并不真正支持过渡。

如果您想要带有背景渐变的淡入效果，您有 在容器元素上设置不透明度并“转换”不透明度。