我尝试应用过渡属性,以便在悬停时图像发生变化时产生效果,但似乎不起作用。请看看并帮助我。
.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);
}
答案 0 :(得分:8)
background-image
上的转换不能跨浏览器工作,因此请使用伪元素
使用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>
答案 1 :(得分:1)
这是解决方案。一些例子中使用的图像..
.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>
答案 2 :(得分:1)
使用不透明度进行过渡。它不适用于图像
答案 3 :(得分:0)
使用background
css属性代替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>