奇怪格子的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转换

回答

相关问题