css是一种用于网页设计和布局的语言，可以实现各种样式和效果，包括背景大小的设置。背景大小是指在网页加载时，背景图片的大小和显示方式。设置好背景大小不仅能够提升网页的美观度，还能提高用户体验。接下来，我们就来详细地讲解如何使用css设置背景大小。
一、使用background-size属性
background-size属性是用来设置背景大小的。它可以指定背景图片的大小和显示方式，有三种常用的值：cover、contain和px。具体来说，它们分别表示：
- cover：使背景图片始终铺满整个背景区域，但如果图片比背景区域小，会自动拉伸或放大图片，使其铺满整个背景区域。
- contain：使背景图片在不拉伸的情况下，尽可能地在背景区域中居中显示，同时保留其原始大小。
- px：直接指定背景图片的大小，可以是固定值、百分比或者关键字auto，其中auto表示原始大小。
下面我们通过几个例子来演示如何使用background-size属性。
- cover
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: cover;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是一段测试文本。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2176" title="AI角色脑洞生成器"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680420147770.png" alt="AI角色脑洞生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2176" title="AI角色脑洞生成器">AI角色脑洞生成器</a>
<p>一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事</p>
</div>
<a href="/ai/2176" title="AI角色脑洞生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</body>
</html>上面的代码中，我们使用了一个由Lorem Picsum提供的随机图片作为背景。在CSS中，我们将背景图片铺满整个背景区域，效果如下：
可以看到，图片的高度被拉长了，但是宽度也得到了充分的保留，让整个背景显得更加美观。
- contain
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: contain;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是一段测试文本。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</body>
</html>上面的代码中，我们同样使用了一个随机图片作为背景。在CSS中，使用了contain属性，使图片不被拉伸，而是在背景区域中尽可能地居中显示。效果如下：
从图片效果中可以看到，虽然图片不能完全铺满背景区域，但是整个设计感更加平衡。
- px
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: 600px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是一段测试文本。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</body>
</html>上面的代码中，我们同样使用了一个随机图片作为背景。在CSS中，使用了600px尺寸的固定值设置，效果如下：
可以看到，由于图片尺寸被限制在600px，整个背景区域留白比较多。所以，在使用px值设置背景大小时，需要根据具体情况进行调整，确保背景图片的大小能够与整个页面相协调。
二、使用background-position属性
除了background-size属性，我们还可以使用background-position属性来设置背景位置。这个属性可以使背景图片在背景区域中水平或垂直居中，以及带有相应的偏移量。具体使用方式如下：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是一段测试文本。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</body>
</html>上面代码中，我们设置了居中的位置，效果如下：
从效果图中可以看到，居中对齐的位置与图片的中心重合，可视效果非常好。
三、总结
以上就是关于如何使用CSS设置背景大小的方法。在实际开发中，关注用户体验和页面整体美观度应该是最重要的。通过良好的背景设置，可以让我们的网页更加吸引人，实现更好的设计效果。
