Html 如何为网页背景全屏显示 gif？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21590343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display a gif fullscreen for a webpage background?
提问by user3264048
I'm trying to make a GIF fit my whole screen, but so far its just a small square that is on my screen while the rest is white. However, I want it to take up all the space.
我正在尝试使 GIF 适合我的整个屏幕，但到目前为止它只是我屏幕上的一个小方块，而其余部分是白色的。但是，我希望它占据所有空间。
Any ideas?
有任何想法吗？
回答by Juan
if it's background, use background-size: cover;
如果是背景，请使用 background-size: cover;
body{
background-image: url('http://i.stack.imgur.com/kx8MT.gif');
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}回答by zsaat14
IMG Method
IMG方法
If you want the image to be a stand alone element, use this CSS:
如果您希望图像成为独立元素，请使用以下 CSS：
#selector {
width:100%;
height:100%;
}
With this HTML:
使用此 HTML：
<img src='folder/image.gif' id='selector'/>
Please note that the img tag would have to be inside the body tag ONLY. If it were inside anything else, it may not fill the entire screen based on the other elements properties. This method will also not work if the page is taller than the image. It will leave white space. This is where the background method comes in
请注意 img 标签只能在 body 标签内。如果它在其他任何东西内，它可能不会根据其他元素属性填满整个屏幕。如果页面比图像高，此方法也将不起作用。它会留下空白。这就是背景方法的用武之地
Background Image Method
背景图像方法
If you want it to be the background image of you page, you can use this CSS:
如果你想让它成为你页面的背景图片，你可以使用这个 CSS：
body {
background-image:url('folder/image.gif');
background-size:100%;
background-repeat: repeat-y;
background-attachment: fixed;
height:100%;
width:100%;
}
Or the shorthand version:
或者简写版本：
body {
background:url('folder/image.gif') repeat-y 100% 100% fixed;
height:100%;
width:100%;
}
回答by davidlj95
You can set up a background with your GIF file and set the body this way:
您可以使用 GIF 文件设置背景并以这种方式设置正文：
body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}
Change background image URL with your GIF. With background-position: centeryou can put the image to the center and with background-size: coveryou set the picture to fit all the screen. You can also set background-size: containif you want to fit the picture at 100% of the screen but without leaving any part of the picture without showing.
使用您的 GIF 更改背景图片 URL。有了background-position: center你可以把图像中心，并与background-size: cover您设置的图片，以符合所有的屏幕。您还可以设置background-size: contain是否要使图片100% 适合屏幕，但不保留图片的任何部分而不显示。
Here's more info about the property:
以下是有关该物业的更多信息：
http://www.w3schools.com/cssref/css3_pr_background-size.asp
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Hope it helps :)
希望能帮助到你 ：）
回答by Michael
In your CSS Style tag put this:
在你的 CSS 样式标签中输入：
body {
background: url('yourgif.gif') no-repeat center center fixed;
background-size: cover;
}
回答by AJC
if you're happy using it as a background image and CSS3 then background-size: cover;would do the trick
如果你很高兴使用它作为背景图片和 CSS3 那么 background-size: cover;就可以了
回答by jonsuh
This should do what you're looking for.
这应该做你正在寻找的。
CSS:
CSS：
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
HTML:
HTML：
<div class="gif-container"></div>
