奇怪格子的CSS轉換

我開發我自己的簡單圖片庫和即時通訊有一些奇怪的問題，當圖像在div容器更新。奇怪格子的CSS轉換

它應該做的是當人點擊其中一個圖像按鈕以查看其放大的圖像時，它將淡入該圖像，如縮略圖所示。什麼即時通訊有麻煩，它會消失，並在同一時間像方格轉換。

Take a look

什麼，我試圖做的是設置孩子li的和div的background-size到background-size: 600px 450px;和background-size: 100% 100%但任何一個仍使怪異的過渡。

唯一不做格子轉換的時間是當沒有background-size設置爲任何元素。

在此先感謝！

來源

2015-03-19 xR34P3Rx

這很奇怪，但做了一些層次感......你的兩個背景圖像是不同的大小。將寬度設置爲100％是有效的，但是當您應用CSS過渡時，它將*轉換爲該大小。 – 2015-03-19 03:30:46

use'background-repeat：no-repeat;'on'li：nth-child（1）'＆'li：nth-child（2）'我認爲那是你例外 – Sathish 2015-03-19 04:04:52

@SathishS你是一個拯救生命的人！謝謝！。把它作爲一個答案，生病請確保投票！ – xR34P3Rx 2015-03-19 04:41:01

上li:nth-child(1) & li:nth-child(2)使用background-repeat:no-repeat;因爲你使用的圖像作爲背景，因此重複，然後轉移到100％，

li:nth-child(1){ 
    background: url("http://i.imgur.com/dT06PEZ.jpg"); 
    background-size: 100% 100%; 
    background-repeat:no-repeat; 
} 
li:nth-child(2){ 
    background: url("http://i.imgur.com/whcDsFy.jpg"); 
    background-size: 100% 100%; 
    background-repeat:no-repeat; 
}

來源

2015-03-19 13:06:42 Sathish

奇怪格子的CSS轉換

回答

相關問題