Question

我最近一直在玩html，css和JS。现在我有一个有背景gif的div。这就是我所做的：

<div class = "mydiv" style = "background-image: url(play.gif);"></div>

首先，它通过并排重复图像来填充整个空间。我想知道是否有办法让图像只显示一次并位于div的中心。

我遇到的另一个问题是，是否有可能在开始时“暂停”gif，只有当用户将鼠标悬停在div上时才会播放，当它们悬停在gif上时会返回并保持在开头。如果这不适用于GIF，那么视频是否可能（.mp4 .webm等）

Answer 1

对于问题的第一部分，是的，您可以在中心出现一次。这是一个例子。

.mydiv{width:100%;
      height:100vh;
  background-image:url(http://bestanimations.com/Animals/Birds/Penguins/animated-penguin-gif-5.gif);
  background-repeat:no-repeat;
  background-position: center center;}

<div class="mydiv">
</div>

Answer 2

您可以使用以下内容：

.mydiv {
    background-image: url(static.gif);
    background-repeat: no-repeat;
    background-position: center;
}

.mydiv:hover {
    background-image: url(play.gif);
}

其中static.gif只是你的gif的第一帧。

暂停背景GIF动画/视频

2 个答案: