相关疑难解决方法(0)

今天早些时候,我问过Overlay背景图像,背景色为rgba.我的目标是使用背景图像的div,当有人悬停div时,背景图像会覆盖rgba颜色.在答案中,:after给出了一个解决方案:

#the-div {
    background-image: url('some-url');
}

#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

我现在想要有相同的,但有一个CSS过渡:我想要淡入的背景颜色.我尝试添加transition: all 1s;到#the-divCSS,但这不起作用.我也试着将它添加到#the-div:hover和#the-div:after,但也不能工作.

有没有一种纯粹的CSS方法来为带有背景图像的div添加淡入淡出效果？