css背景大屏幕底部截掉

在 Web 设计中，我们可能会遇到这样一种情况，需要将背景图片设置为全屏幕，但是底部可能需要截掉一部分。这时候，我们可以使用 CSS 来实现这个效果。

html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url("bg.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
}

首先，我们需要将 html 和 body 的高度都设为 100%，并将 margin 和 padding 都设为 0，这样可以让我们的背景图片充满整个屏幕。

然后，我们设置了 body 的背景图片为我们需要显示的图片，background-position 属性将图片位置设为了居中底部，background-repeat 属性设置为了不重复，这样就不会出现背景图片的平铺效果。最后，我们将背景图片的大小设置为 cover，这样可以保证背景图片始终占满整个屏幕。

但是，由于我们设置了背景图片的位置为底部，因此可能会出现底部被截掉的情况。这时候，我们可以将 body 的 padding-bottom 设为需要截掉的高度，这样就可以让背景图片显示在页面的中间位置。

body {
background-image: url("bg.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 200px;
}

这样，我们就可以使用 CSS 来实现将背景图片设置为全屏幕，并在底部截掉一定高度的效果了。