我正在通过以下方式在网页上播放GIF:



div {
  width: 500px;
  height: 500px;
  background: url('http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg');
}

div:hover {
  background: url('http://netdna.webdesignerdepot.com/uploads7/50-inspiring-animated-gifs/012.gif');
}

<div>
</div>





我有办法调整播放的GIF大小以适合div元素的大小吗?在该示例中,我故意将GIF设置为不大或太大,因此它必须播放动画的一角,或者将其连续多次播放以填充空间。 http://www.wired.com/images_blogs/design/2013/09/Boglio_05.gif

最佳答案

这是您想要的吗:background-size: cover;?无论如何,要获得更多可能性,您应该仅了解例如background-sizebackground-positionbackground-repeat的更多信息。



div {
  width: 500px;
  height: 500px;
  background: url('http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg');
}

div:hover {
  background: url('http://netdna.webdesignerdepot.com/uploads7/50-inspiring-animated-gifs/012.gif');
  background-size: cover;
}

<div>
</div>

09-25 17:09
查看更多