Question

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

它应该做的是当人们点击其中一个图像按钮看它放大时，它会缩小到缩略图上看到的那个图像。我遇到麻烦的是，它在同一时间消失并且确实像一个方格过渡。

我尝试做的是将孩子li和div的{{1}}设置为background-size和background-size: 600px 450px;但是其中任何一个仍然让人觉得奇怪过渡。

唯一没有进行方格转换的时候是没有background-size: 100% 100%设置为任何一个元素。

提前致谢！

Answer 1

在background-repeat:no-repeat;上使用li:nth-child(1) & li:nth-child(2)，因为您使用图片作为背景，因此重复然后移至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过渡

1 个答案: