CSS background是最常用的CSS属性之一。然而，并不是所有开发人员都知道使用多种背景。这段时间都在关注使用多种背景场景。在本文中，会详细介绍background-image`属性，并结合图形来解释多个背景使用方式以及其实际好处。

如果你还了解 CSS background 属性，可以去先 MDN 查看相关的知识。

介绍

CSS background属性是以下属性的简写:

上篇文章主要讲述了CSS的基础用法，讲述了如何定义头文件，导入CSS文件，id和class选择器，元素选择器，后代选择器，子元素选择器，兄弟选择器，伪类选择器等等，让大家对CSS选择器有个简单的认识和了解。这篇接上篇文章，继续讲解CSS的基础用法。

背景Background

背景可以设置很多，比如背景颜色，背景图片，背景定位，背景重复，背景关联，

在CSS中，背景样式主要包括背景颜色和背景图像。在传统的布局中，只能使用少数的标签来定义背景图像和背景颜色。但是随着Web2.0时代的到来，设置背景样式不再使用传统HTML属性来定义，转而使用无限制、更灵活的CSS来定义。

目标

• 设置背景颜色
• 设置背景图片
• 操作背景图片样式

本教程将向你展示一种使用CSS编写整页背景图像的简单方法。你还将学习如何使图像响应用户的屏幕尺寸。

使背景图像完全伸展以覆盖整个浏览器视口是Web设计中的常见任务。幸运的是，可以使用几行CSS来完成此任务。

01用图像覆盖视口

首先，我们要确保我们的页面实际上覆盖了整个视口：

在内部html，我们将使用background-image属性设置图像：

大家好，我是大澈！

本文约

背景图片在网页的用处很广，但他就是有个毛病，它的尺寸不太好控制，一旦背景的图片超过了容器的限制，就会直接被截取，让图片看起来怪怪的。

实际开发中，设计师给你的图片难免会有一点误差，但你的图片又不能这样展示，更不可能自己手动修改图片，所以就必须使用一种方法来让图片自动适应容器。

本质上要解决的是每个即使不同尺寸的图片，都能统一适配同个容器的尺寸。

语法

background-clip 属性

规定背景的绘制区域：

border-box 背景被裁剪到边框盒。

padding-box 背景被裁剪到内边距框。

content-box 背景被裁剪到内容框。