html - CSS 背景颜色 + 悬停时图像淡入淡出效果

Question

我目前有一个以图像为背景的 div，样式如下:

        #portfolio-1 {
        background:
        url(images/portfolio-1.jpg);
        background-size: 100% 100%;
    }

然后我在悬停时更改背景图片，以便它上面有一种带有以下 css 的红色覆盖层:

        #portfolio-1:hover {
        background: /* top, transparent red, faked with gradient */
        linear-gradient( rgba(255, 0, 0, 0.45),
        rgba(255, 0, 0, 0.45)),
        /* bottom, image */
        url(images/portfolio-1.jpg);
        background-size: 100% 100%;

    }

这按预期工作并且图像上立即有一个红色层，但是我似乎无法添加缓动效果以便过渡发生 X 秒。我试过使用

            transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;

和

            transition: background 0.5s ease;
        -webkit-transition: background 0.5s ease;

但没有成功。

Answer 1

您应该在 #portfolio-1 类中使用以下代码来更改您想要更改的背景颜色:

   -webkit-transition: background 2s ease;
   -moz-transition: background 2s ease;
   -o-transition: background 2s ease;
   transition: background 2s ease;

然后在您的 #portfolio-1:hover 类中，添加以下内容:

background: red;