奇怪的方格 css 过渡

Question

我正在开发自己的简单图片库，但在 div 容器中更新图片时遇到了一些奇怪的问题。

它应该做的是当人们点击其中一个图像按钮来查看它放大时，它会淡化为缩略图上看到的那个图像。我遇到的问题是它逐渐消失，同时又像方格过渡。

我尝试做的是将 child li 和 div 的 background-size 设置为 background-size: 600px 450px; 和 background-size: 100% 100% 但是任何一个仍然进行奇怪的过渡。

它唯一不进行方格过渡的情况是没有为任一元素设置 background-size 时。

提前致谢！

Answer 1

在 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;
}

奇怪的方格 css 过渡

Weird checkered css transition

html

css

transition

image-gallery