Я воспроизвожу GIF при наведении на веб-страницу следующим образом:

div {
  ширина: 500px;
  высота: 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');
}

Есть ли способ изменить размер воспроизводимого GIF, чтобы он соответствовал размеру элемента div? Я специально поместил GIF в этот пример, который не большой или слишком большой, поэтому он должен воспроизвести угол анимации или он воспроизводит его несколько раз рядом друг с другом, чтобы заполнить пространство. http://www.wired.com/images_blogs/design/2013/09/Boglio_05.gif

Pipeline

Ответы (1)

Вот что вам нужно: background-size: cover;? В любом случае, чтобы получить больше возможностей, вам следует просто узнать больше о background-size, background-position и background-repeat, например.

div {
  ширина: 500px;
  высота: 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;
}

2022 WebDevInsider