CSS：

Question

我正在尝试使GIF适合我的整个屏幕，但到目前为止它只是一个小屏幕在我的屏幕上，而其余的是白色。但是，我希望它占用所有空间。

有什么想法吗？

Answer 1

如果是背景，请使用background-size: cover;

body{
    background-image: url('http://i.stack.imgur.com/kx8MT.gif');
    background-size: cover;
    
    
    
    height: 100vh;
    padding:0;
    margin:0;
}

Answer 2

IMG方法

如果您希望图像是独立元素，请使用此CSS：

#selector {
    width:100%;
    height:100%;
}

使用此HTML：

<img src='folder/image.gif' id='selector'/>

<强> Fiddle

请注意，img标签只能在body标签内。如果它在其他任何内容中，它可能不会根据其他元素属性填充整个屏幕。如果页面高于图像，则此方法也不起作用。它会留下空白。这是背景方法的用武之地

背景图片方法

如果您希望它是您页面的背景图片，您可以使用此CSS：

body {
    background-image:url('folder/image.gif');
    background-size:100%;
    background-repeat: repeat-y;
    background-attachment: fixed;
    height:100%;
    width:100%;
}

<强> Fiddle

或速记版本：

body {
    background:url('folder/image.gif') repeat-y 100% 100% fixed;
    height:100%;
    width:100%;
}

<强> Fiddle

Answer 3

您可以使用GIF文件设置背景并以这种方式设置正文：

body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}

使用您的GIF更改背景图片网址。使用background-position: center，您可以将图片放到中心，然后使用background-size: cover设置图片以适应所有屏幕。您还可以设置background-size: contain，如果您想将图片放在100％的屏幕上，但不留下图片的任何部分而不显示。

以下是有关该物业的更多信息：

http://www.w3schools.com/cssref/css3_pr_background-size.asp

希望有所帮助：）

Answer 4

如果你很高兴将它用作背景图像和CSS3，那么background-size: cover;就可以了。

Answer 5

这应该做你想要的。

CSS：

html, body {
    height: 100%;
    margin: 0;
}

.gif-container {
  background: url("image.gif") center;
  background-size: cover;

  height: 100%;
}

HTML：

<div class="gif-container"></div>

Answer 6

在你的CSS Style标签中输入：

body {
  background: url('yourgif.gif') no-repeat center center fixed;
  background-size: cover;
}

如何为网页背景显示全屏gif？

6 个答案:

CSS：

HTML：