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過渡

回答

相關問題