css3后台转换

简短解释：我想在

opacity 0

上有一个背景图像，直到你悬停，它变成

opacity:1

，并进行

ease

transformation

我试图在用户悬停图表时显示背景图像（它必须是可见的），但我不知道如何使用

opacity:0

隐藏背景图像，并使用

opacity:1

变换在

：hover

上显示背景图像

CSS3：

HTML:

---

我到底错过了什么？

我做了一些研究，你错过了一个方向。如果没有方向，您无法使用`-webkit转换来简化。你需要稍微改变一下

原件：

#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。如果您需要任何帮助，请告诉我。

没有看到问题：更新了小提琴（第一个不透明度为0）@XaviAlsina您是否正在尝试淡出一个背景图像，并在悬停时显示另一个？不清楚您正在尝试做什么，或者确切地说，是什么问题。如果您正试图转换背景图像属性，则无法转换背景图像属性。CSS转换无法更改背景颜色（即rgba（）颜色的alpha通道）。它们只能处理数值，例如元素的整体不透明度。这就是你想做的吗？我不知道你当时问的是什么。你是在问如何转换到0到1，还是不是。添加了一个简短的解释。我已经为你的问题确定了一个答案。我试图让它在下面的演示中工作，但它没有：无论如何，别担心，我用背景位置解决了它，而不是不透明。无论如何，谢谢你抽出时间！

#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;
}