我正在通过以下方式在网页上播放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-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>