CSS背景（background）

点击打开在线编译器，边学边练

在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本篇文章就给大家介绍css怎样设置背景图片，需要的朋友可以参考和学习一下，希望对你有所帮助。

一、background概述

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

属性	描述
background-color:	设置元素的背景颜色
background-image:	设置元素的背景图像
background-repeat:	控制背景图像是否重复
background-position:	控制背景图像在元素中的位置
background-attachment:	控制背景图像是否跟随窗口滚动
background-size	设置背景图像的尺寸
background-origin	设置 background-position 属性相对于什么位置来定位背景图像
background-clip	设置背景图像的显示区域
background	背景属性的缩写，可以在一个声明中设置所有的背景属性

css background属性就是专门设置背景的属性，可以设置背景色，也可以设置背景图片。

二、属性

1. background-color

（1）定义和用法：background-color 属性设置元素的背景颜色

值	描述
color_name	使用具体颜色名称为元素设置背景颜色（例如 red）
hex_number	使用十六进制码为元素设置背景颜色（例如 #ff0000）
rgb_number	使用 rgb() 函数为元素设置背景颜色（例如 rgb(255,0,0)）
transparent	默认值，设置背景颜色为透明，大多数情况下我们并不会用到它。但如果您不希望某个元素拥有背景颜色，或者不希望用户对浏览器的设置（比如开启夜间模式、护眼模式）影响到您的设计，那么就可以使用 transparent 来将颜色设置为透明的
inherit	从父元素继承对背景颜色的设置

（2）元素背景的范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

（3）transparent 值

尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。

使用 background-color 为元素设置背景颜色：

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: white;
        background-color: blue;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted yellow;  /*设置一个宽 10px 的黄色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-color 属性</p>
</body>
</html>

展示结果如下：

background-color

通过运行结果可以看出 background-color 属性能够为元素设置一种纯色的背景，这种颜色会填充元素的内容、内边距以及边框区域（也可以理解为边框及以内的所有区域），对于元素边框以外的区域（外边距）则没有影响。

2. background-image设置背景图

background-image:url("imgs/main_bg.jpg"),

如果属性在css文件中设置，而图片不在css文件夹中，那么路径前面加上返回上一层文件夹 …/

（1）background-image 属性为元素设置背景图像。

（2）元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

（3）默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

（4）url(‘URL’)：指向图像的路径。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

3. background-repeat背景图重复

默认情况下，背景图会铺满整个页面，背景图大小不够铺满整个页面时，背景图会在横坐标和纵坐标中进行重复；

属性	属性值	描述
background-repeat:	repeat	横、纵坐标重复（默认值）
	no-repeat	背景图像仅显示一次，不在任何方向上重复
	repeat-x	背景图像仅在水平方向上重复
	repeat-y	背景图像仅在垂直方向上重复
	inherit	从父元素继承 background-repeat 属性的设置

4. background-size设置背景图的尺寸

属性	属性值	描述
background-size:	xpos ypos	使用像素（px）或其它 CSS 单位来设置背景图像的高度和宽度，xpos 表示宽度，ypos 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动）
	x% y%	使用百分比表示背景图像相对于所在元素宽度与高度的百分比，x% 表示宽度，y% 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动）
	cover	保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完全覆盖元素所在的区域，这么做可能会导致背景图像的某些部分超出元素区域而无法显示
	contain	保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完整的显示在元素所在区域，背景图像可能无法完全覆盖整个元素区域

5. background-position设置背景图位置

预设值： left、bottom、right、top、center（居中）

属性	属性值	描述
background-position:	center	背景图横、纵向居中
	center top	横向居中，纵向靠上
	center bottom	横向居中，纵向靠下
	left center	横向靠左，纵向居中

注：也可以用数值或百分比如background-position：10px 10px 表示横、纵坐标离左边、上边边框的距离；

6. background-attachment设置为是否固定

属性	属性值	描述
background-attachment:	fixed	当页面的其余部分滚动时，背景图像固定不动
	scroll	默认值，背景图像随着页面元素的滚动而移动
	inherit	从父元素继承 background-attachment 属性的设置

7. background-origin

background-origin 是 CSS3 中新增的属性。在使用 background-position 属性来设置背景图像的位置时，默认是以元素左上角的位置来计算的。您还可以使用 background-origin 属性来设置 background-position 属性相对哪个位置来定位背景图像，background-origin 属性的可选值如下：

值	描述
padding-box	相对于元素的内边距区域来定位背景图像
border-box	相对于元素的边框区域来定位背景图像
content-box	相对于元素的内容区域来定位背景图像

8. background-clip

background-clip 是 CSS3 中新增的属性，通过它可以设置背景图像的显示区域。background-clip 属性的可选值如下：

值	说明
border-box	默认值，在元素边框及以内的区域显示背景图像
padding-box	在元素内边距及以内的区域显示背景图像
content-box	在元素内容区域显示背景图像

注意：背景半透明是指盒子背景半透明，盒子里面的内容不收影响。

9. background

background 是背景属性的简写形式，通过它不仅可以为元素设置某个背景属性，还可以同时设置多个或者所有的背景属性。在设置多个背景属性时并没有固定的顺序，但推荐使用如下顺序进行设置：

background-color || background-image || background-position [/ background-size]? || background-repeat || 
background-attachment || background-origin || background-clip

注意：背景图和img属性的区别：

（1）img元素属于HTML的概念，背景图属于css的概念

（2）当图片属于网页内容时，必须使用img元素

（3）当图片仅用于美化页面时，必须使用背景图

本文固定URL：https://www.dotcpp.com/course/1132

上一课：