DIV的背景图像变化的CSS过渡

我试图应用过渡属性，以便在图像在悬停时发生变化时产生效果，但似乎不起作用。请看看并帮助我。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); 
}

来源

2017-02-20 Shubham Jha

代码中没有转换。告诉我们你试过的东西，不要指望我们为你写东西。 – junkfoodjunkie

as @junkfoodjunkie said，no code = no answers –

哦，是的！我的坏..更新... –

这是解决方案。从一些例子中使用的图像..

CSS属性

.bgImg { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-image: url(http://i.imgur.com/tmM8Bpy.jpg); 
 
    -webkit-transition: background-image 0.5s linear; 
 
    -moz-transition: background-image 0.5s linear; 
 
    -ms-transition: background-image 0.5s linear; 
 
    transition: background-image 0.5s linear; 
 
} 
 

 
.bgImg:hover { 
 
    background-image: url(http://i.imgur.com/FWqOONj.jpg); 
 
}

<div class="bgImg"></div>

来源

2017-02-20 10:52:30

使用background代替background-image财产，将工作...

.ow-outer { 
 
    background-color: #fff; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    border: 1px solid #fff; 
 
    text-align: center; 
 
    padding: 20px; 
 
    background: url('https://www.hello.com/img_/hello_logo_hero.png'); 
 
    background-size: 120px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    transition: all 5s ease-in-out; 
 
} 
 
.ow-outer:hover { 
 
    background: url('https://images.chesscomfiles.com/uploads/v1/blog/287126.d6272c47.630x354o.36990d3fc701.png'); 
 
}

<div class="ow-outer"></div>

来源

2017-02-20 10:59:37 Phantom

这没有什么区别。 –

再次检查我已更新回答 – Phantom

上background-image转型不起作用SS浏览器，所以使用伪元件代替

使用opacity

.ow-outer { 
 
    position: relative; 
 
    background-color: #fff; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    border: 1px solid #fff; 
 
    text-align: center; 
 
    padding: 20px; 
 
    background: url(http://placehold.it/200) no-repeat center; 
 
    background-size: 120px; 
 
} 
 
.ow-outer::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; top: 0; right:0; bottom: 0; 
 
    background: url(http://placehold.it/200/f00) no-repeat center; 
 
    background-size: inherit; 
 
    opacity: 0; 
 
    transition: opacity 0.3s ease-in-out; 
 
} 
 
.ow-outer:hover::before { 
 
    opacity: 1; 
 
}

<div class="ow-outer"></div>

使用transform: scale

.ow-outer { 
 
    position: relative; 
 
    background-color: #fff; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    border: 1px solid #fff; 
 
    text-align: center; 
 
    padding: 20px; 
 
    background: url(http://placehold.it/200) no-repeat center; 
 
    background-size: 120px; 
 
} 
 
.ow-outer::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; top: 0; right:0; bottom: 0; 
 
    background: url(http://placehold.it/200/f00) no-repeat center; 
 
    background-size: inherit; 
 
    transform: scale(0); 
 
    transition: transform 0.3s ease-in-out; 
 
} 
 
.ow-outer:hover::before { 
 
    transform: scale(1); 
 
}

<div class="ow-outer"></div>

来源

2017-02-20 11:28:13 LGSon

我测试了'opacity'代码并且工作完美，这个解决方案很漂亮 – Gendrith

使用不透明度进行转场。它不适用于图像

来源

2017-02-20 12:20:46

DIV的背景图像变化的CSS过渡

回答

相关问题