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

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'/>

小提琴

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

背景图像方法

如果您希望它是您页面的背景图像,您可以使用此CSS:

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

小提琴

或速记版本:

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

小提琴