将 GIF 作为 div 的背景播放时调整其大小

Question

我通过以下方式在我的网页上悬停时播放 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，所以它必须播放动画的一角或者连续播放多次以填充 space。 http://www.wired.com/images_blogs/design/2013/09/Boglio_05.gif

Answer 1

这是您想要的吗：background-size: cover;？无论如何，为了获得更多的可能性，您应该多了解 background-size、background-position 和 background-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>

将 GIF 作为 div 的背景播放时调整其大小

Resizing a GIF when playing it as a background of a div

html

javascript

css

jquery

gif