如何在背景大小屬性上應用轉換

Question

我試圖在背景大小上轉換，怎麼樣？

http://jsfiddle.net/FT4CQ/17/

<div class="cell" style="width: 345.53px; height: 210.53px; background-image: url(https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn1/1521894_10151755196011682_1359230168_n.jpg); position: absolute;-webkit-transition: top 0.5s, left 0.5s; transition: top 0.5s, left 0.5s;" data-delay="2" data-height="200" data-width="331" data-state="move" id="2-2"></div> 

    .cell:hover{ 
     transition: background-size 1s; 
     -webkit-transition: background-size 1s; 
     background-size:cover; 
     cursor: pointer; 
} 

Answer 1

看看這個網站： -

http://css3.bradshawenterprises.com/cfimg/

Answer 2

看起來不像它的工作原理非常清楚與background-position: cover;

試試這個：

<div class="cell"></div> 

.cell { 
    -moz-transition: background-size 2s ease-in; 
    /* WebKit */ 
    -webkit-transition: background-size 2s ease-in; 
    /* Opera */ 
    -o-transition: background-size 2s ease-in; 
    /* Standard */ 
    transition: background-size 2s ease-in; 
    width: 345.53px; 
    height: 210.53px; 
    background-image: url(https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn1/1521894_10151755196011682_1359230168_n.jpg); 
    position: absolute; 
    background-size: 150% 150%; 
} 

.cell:hover{ 
    background-size: 100% 100%; 
    cursor: pointer; 
} 

Updated fiddle