当我们想要在网页中使用背景图时，有时候我们希望这个背景图可以充满整个屏幕。下面是在CSS中实现这个效果的攻略。
设置背景图
首先，我们需要设置这个背景图。我们可以使用background-image属性来设置背景图。例如：
body {
background-image: url('background.jpg');
}
这会将名为background.jpg的图片设置为body元素的背景。
设置背景大小
接下来，我们需要设置背景图的大小。如果我们只是简单地设置background-size属性为cover，那么背景图将填充整个屏幕：
body {
background-image: url('background.jpg');
background-size: cover;
}
其中，cover表示图片会以保持纵横比的方式缩放，以至于背景可以完全覆盖内容区域，但是可能只有部分图片可以显示出来。但是，这个方法有一个缺点：如果背景图的宽高比与屏幕不匹配，那么图片就会被拉伸或压缩。
为了解决这个问题，我们可以使用background-size属性的值为100% auto。这个值会将背景宽度设置为屏幕宽度，但是高度会按原始宽高比缩放：
body {
background-image: url('background.jpg');
background-size: 100% auto;
}
这样，我们就可以完美地展示全屏背景图了。
示例1
html, body {
height: 100%;
}
body {
background-image: url('background.jpg');
background-size: 100% auto;
}
这里，我们将html和body元素的高度都设置为100%，以便让body元素占据整个屏幕高度。然后，我们将背景图宽度设置为屏幕宽度，高度按原始宽高比缩放。
示例2
<body>
<div class="container">
<h1>这里是内容区域</h1>
</div>
</body>
html, body {
height: 100%;
}
body {
background-image: url('background.jpg');
background-size: 100% auto;
}
.container {
margin: 0 auto;
max-width: 800px;
padding: 50px;
background-color: #ffffff;
}
这里，我们将body元素设置为全屏背景，并将内容区域包含在一个div元素中。我们通过设置margin: 0 auto、max-width: 800px和padding: 50px让内容区域居中且留有空白间距，同时设置background-color: #ffffff将内容区域背景色设置为白色。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css新手教程之背景图充满整个屏幕 - Python技术站
微信扫一扫 
支付宝扫一扫 