Question

我遇到了问题：当我在css背景中添加图像时，图像会停止缩放动画。

遵循HTML代码

<ul class="memberList">
   <li class="mem1"><a href="#"><b></b></a> <span>Member Name 1</span></li>
</ul>

要查看完整视图，请查看Jsfiddle

Answer 1

可行，您只需在background-size中设置.memberList li.mem1 a b即可。此外，您可能希望在其中移动过渡以便缩小。看看这个，它是您的代码，只需进行这两项小改动（将大小从205px 226px更改为适合您的比例偏好的值）：

＆＃13;

.memberList{ float: left; margin: 10px 0 0 15px; padding: 0; width: 1200px; position: absolute; top:0; left: 0;}
.memberList li{ float: left; margin: 0 7px; text-align: center; list-style: none;}
.memberList li a{display: block; border: solid 1px #f0f0f0; overflow: hidden; height: 144px; width: 130px; margin-bottom: 15px;}
.memberList li a b {display: block; height: 144px; width: 130px;}
.memberList li.mem1 a b{
	background-image: url(https://s13.postimg.org/y77inuf47/member_pic1.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size:205px 226px;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease; 
}
.memberList li:hover a b{
	background-size: 100% 100%; /* width and height, can be %, px or whatever. */
}

＆＃13;

<ul class="memberList">
  <li class="mem1"><a href="#"><b></b></a> <span>Member Name 1</span></li>
</ul>

＆＃13;

图像缩放动画不能与CSS一起使用

1 个答案: