我试图让一个 GIF 适应整个屏幕,但目前它只是一个小正方形,而其余部分则是白色。然而,我希望它占据所有的空间。
有什么想法吗?
有什么想法吗?
background-size: cover;
body{
background-image: url('http://i.stack.imgur.com/kx8MT.gif');
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
IMG方法
如果您希望图像成为一个独立的元素,请使用以下CSS:
#selector {
width:100%;
height:100%;
}
<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%;
}
body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}
background-position:center
,您可以将图像放置在中心,并使用background-size:cover
将图片设置为适合整个屏幕。如果想要将图片调整到屏幕的100%,但不留下任何未显示的部分,则还可以设置background-size:contain
。width:100%
和 height:100%
添加到 body
是否有效。 - davidlj95body {
background: url('yourgif.gif') no-repeat center center fixed;
background-size: cover;
}
这应该是你想要的。
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
<div class="gif-container"></div>
background-size: cover;
来实现。同时确保其父元素的大小为100%