希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

【技术等级】初级

【承接文章】《图片在容器中产生的底部间隔，CSS可以巧妙解决，前端原理很重要》

本文重点讲解利用CSS技术设置HTML元素的背景，包括背景颜色和背景图片，这样可以让你的页面更加美观。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。

背景属性是指可以为HTML中的页面、块级元素、内联元素等设置背景外观的效果。这里一定要注意，背景属性并不是只能为页面背景设置的，也可以为HTML文档中任意元素设置背景的。这一组CSS属性包括以下几个：

background-color

background-image

background-repeat

background-position

background-attachment

一、设置背景颜色：

CSS利用 background-color 属性设置元素的背景颜色

该属性有多种取值：

十六进制颜色代码，例如：background-color:#ff0000。

十进制颜色代码，例如：background-color:rgb(255,0,0)。

带有透明度通道的十进制颜色代码，例如：background-color:rgba(255,0,0,0.3)。

颜色英文单词，例如：background-color:red。

颜色三要素模式代码，例如：background-color:hsl(0,100,100)。

带有透明度通道的颜色三要素模式代码，background-color:hsla(0,100,100,0.3)。

上述取值较为常用的是“十六进制颜色代码”、“带有透明度通道的十进制颜色代码”和“颜色英文单词”。下面列举几个代码实例。

p{background-color:#ff0000;} //设置段落的背景为红色

body{background-color:#cccccc;} //设置整个文档的背景为灰色

二、设置背景图片：

CSS利用 background-image 属性设置元素的背景图片

该属性的取值格式如下所示：

background-image:url(Image_URL);

该属性需要在 url() 中指定一个图片的路径和文件名，代码示例如下所示。

body{background-image:url(images/back.jpg);

上述代码设置整个页面的背景图片为images文件夹下的名为back.jpg的图片文件

三、设置背景图片的重复平铺方式：

CSS利用 background-repeat 属性设置背景图片的平铺方式

该属性有多种取值：

repeat，默认值，背景图片平铺。

no-repeat，背景图片不平铺。

repeat-x，背景图片水平平铺。

repeat-y，背景图片垂直平铺。

注意：该属性必须结合 background-image 属性共同使用。

四、设置背景图片出现的位置：

CSS利用 background-position 属性设置背景图片出现的位置

1、可以取值为特定的单词组合。

该种取值可以选取以下几种对齐方式：

水平方向：left（左对齐）、right（右对齐）。

垂直方向：top（顶对齐）、bottom（底对齐）。

居中对齐：center。

上述对齐方式拼凑起来，可以下列形成9种取值方式：

top left, 背景图片顶部居左，位于页面的左上角。

top center, 背景图片顶部居中，位于页面的上方。

top right, 背景图片顶部居右，位于页面的右上角。

center left, 背景图片中部居左，位于页面的中部左侧。

center center, 背景图片中部居中，位于页面的正中心。

center right, 背景图片中部居右，位于页面的中部右侧。

bottom left, 背景图片底部居左，位于页面的右下角。

bottom center, 背景图片底部居中，位于页面的下方。

bottom right, 背景图片底部居右，位于页面的右下角。

注意：若只选取一个对齐方式，则第二个默认为center。

2、可以取值为带有单位的固定坐标值：

格式：background-position:x y;

例如：background-position:100px 300px;

3、以百分比为单位的坐标值：

格式：background-position:x% y%;

例如：background-position:20% 15%;

注意：该属性的使用必须同时具备下列两个条件。

具备background-image属性，也就是必须带有背景图片。

background-repeat属性不能取值为repeat，也就是背景图片不平铺。

五、设置背景图片是否固定或随着页面的其余部分滚动：

该属性有多种取值：

scroll，默认值，背景图片随页面的其余部分滚动。

fixed，背景图片固定。

文章预告

下一篇文章中，小海老师会以本篇文章讲述的几个属性来带领大家实践一些实例。对于渴望在前端开发道路上前进的你一定不能错过！

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上也已经写了有七八篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。