Question

简短说明：我希望opacity 0上有一个背景图片，直到您将其悬停在opacity: 1转换为<{1}}

我试图在用户悬停图表时显示背景图像（它必须是可见的），但我无法弄清楚如何使用ease隐藏背景图像并将其显示在{ {1}} opacity: 0转化。

CSS3：

:hover

HTML：

opacity: 1

我到底错过了什么？

Answer 1

我做了一些研究，你错过了方向。你不能在没有方向的情况下使用`-webkit-transitions。你需要稍微改变一下。

原件：

#canvas {
    background: url("http://lorempixel.com/400/200/") repeat scroll center center rgba(0, 0, 0, 0);
        opacity: 0;
    -webkit-transition: 3s ease opacity;
     transition: .3s ease opacity;
}

#canvas:hover {
  background: url("http://lorempixel.com/400/200/") repeat scroll center center rgba(0, 0, 0, 0);
  opacity: 1;
}

修正：

#canvas {
    background: url("http://lorempixel.com/400/200/") repeat scroll center center rgba(0, 0, 0, 0);
   opacity: 1;
    -webkit-transition: opacity 3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

#canvas:hover {
    background: url("http://lorempixel.com/400/200/") repeat scroll center center rgba(0, 0, 0, 0);
    opacity: 0;
}

不会顺利从0过渡到1.如果您需要任何帮助，请告诉我。

css3在背景上过渡

1 个答案: