Html DIV背景图像变化的CSS转换

我试图应用过渡属性，以在图像在悬停时发生更改时提供效果，但它似乎不起作用。请看一看，帮帮我

.ow-outer {
    background-color: #fff;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid #fff;
    text-align: center;
    padding: 20px;
    background-image: url(../images/team-canada-light.png);
    background-size: 120px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease-in-out;
}
.ow-outer:hover {
    background-image: url(../images/team-canada.png);
}

---

这是解决办法。使用了一些示例中的图像

.bgImg{
宽度：500px；
高度：500px；
背景图片：url(http://i.imgur.com/tmM8Bpy.jpg);
-webkit过渡：背景图像0.5s线性；
-moz过渡：背景图像0.5s线性；
-ms过渡：背景图像0.5s线性；
过渡：背景图像0.5s线性；
}
.bgImg:悬停{
背景图片：url(http://i.imgur.com/FWqOONj.jpg);
}

---

使用

background

css属性，而不是

background image

属性，它将起作用

.owouter{
背景色：#fff；
宽度：200px；
高度：200px；
边界半径：50%；
边框：1px实心#fff；
文本对齐：居中；
填充：20px；
背景：url（'https://www.hello.com/img_/hello_logo_hero.png');
背景尺寸：120px；
背景重复：无重复；
背景位置：中心；
过渡：所有5s易于输入输出；
}
.ow外部：悬停{
背景：url（'https://images.chesscomfiles.com/uploads/v1/blog/287126.d6272c47.630x354o.36990d3fc701.png');
}

---

在

背景图像上的转换在跨浏览器时不起作用，因此请使用伪元素

使用
不透明度


.owouter{
位置：相对位置；
背景色：#fff；
宽度：200px；
高度：200px；
边界半径：50%；
边框：1px实心#fff；
文本对齐：居中；
填充：20px；
背景：url(http://placehold.it/200)无重复中心；
背景尺寸：120px；
}
.ow外部：：之前{
内容：''；
位置：绝对位置；
左侧：0；顶部：0；右侧：0；底部：0；
背景：url(http://placehold.it/200/f00)无重复中心；
背景大小：继承；
不透明度：0；
过渡：不透明度0.3s缓进缓出；
}
.ow外部：悬停：：之前{
不透明度：1；
}
对过渡使用不透明度。它不适用于图像
代码中没有转换。让我们看看你尝试了什么，不要指望我们为你写东西。正如@junkfoodjunkie所说，没有代码=没有答案是的！我的错。。更新…它不起作用，转换只适用于带有整数的属性（高度、宽度、边距、颜色[rgba]）。我不知道你在这里发帖之前是否做过任何研究，但这里有一个线程，对你来说没有什么可行的解决方案/解决方法：这没有任何区别。我测试了
不透明度
代码，效果非常好，这个解决方案很漂亮