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;

CSS背景颜色+图像在悬停时淡出并具有轻松效果

1 个答案: