Question

我有一个滑块，背景出现在这里： http://nigarn.com

我尝试了大量的CSS来减缓白色背景的转换，但没有一个有效。

这就是我目前所拥有的：

＆＃13;

.sp-layer {
    opacity: 1 !important;
 -moz-transition: opacity 7.5s!important;
    -webkit-transition: opacity 7.5s!important;
    transition: opacity 7.5s!important;
color: #fff;
padding-top: 157px!important;
padding-bottom: 180px!important;
 pointer-events: none;
}


.sp-slide:hover .sp-layer {
    opacity: 1 !important;
 -moz-transition: opacity 7.5s!important;
    -webkit-transition: opacity 7.5s!important;
    transition: opacity 7.5s!important;
color: #000;
background:url(http://www.nigarn.com/wp-content/uploads/2016/10/slide-background-2-5.png)no-repeat center top;
padding-top: 157px!important;
padding-bottom: 180px!important;
 pointer-events: none;
}

＆＃13;

但背景仍然会立即出现。如果有人有建议我很感激。

Answer 1

首先，当您实际尝试为opacity设置动画时，您正在设置background-image属性的动画。 opacity永远不会0开头。其次，目前无法通过CSS background-image淡出transition。

由于您的背景图片看起来是均匀的半透明颜色，您应该使用background-color代替。

.sp-layer {
    transition: background-color 0.75s;
}
.sp-slide:hover .sp-layer {
    background-color: rgba(255, 255, 255, 0.75);
}

悬停css的缓慢过渡

1 个答案: