当我尝试使用背景大小封面规则时,我的网页底部仍然有一个空格,gif拒绝覆盖。这只是一个销售朋友定制打火机的简单网站。当我调整页面的大小时,gif会缩放,但不会如此。我应该为html或正文添加最大高度?有什么建议吗?
body {
background: white;
background-image: url(https://78.media.tumblr.com/aed7e970ec7b37b7202aca3354d3b00f/tumblr_n14btdzOKu1r2nfs5o1_500.gif);
background-repeat: no-repeat;
background-size: cover;
display: flex;
margin: 0;
padding: 0;
}
#product {
position: absolute;
top: 350px;
left:290px;
max-height: 100%;
max-width: 100%;
display: flex;
justify-content: space-evenly;
padding: 20px;
}
#product img {
max-width:100%;
max-height: 100%;
}
.add-to-cart{
border: red 1px solid;
}

<!DOCTYPE html>
<html>
<head>
<title>Vinyl Stick</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<body>
<div id="product">
<div id="lighter-bundle-container">
<div class="lighter-1">
<a href="#"><img alt="img" src="lighter.png"></a>
</div>
</div>
<div id="lighter-bundle-container">
<div class="lighter-2">
<a href="#"><img alt="img" src="lighter.png"></a>
</div>
</div>
<div id="lighter-bundle-container">
<div class="lighter-3">
<a href="#"><img alt="img" src="lighter.png"></a>
</div>
</div>
</div>
<div class="add-to-cart">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="7MS2CP7NYCUJ4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</body>
</html>
&#13;