css background(背景)属性有8个，但是工作中并没有把每个都用起来，有些甚至不知道是什么作用，这不太好。
css的很多样式是可以简写的，但是简写是有顺序的，就像margin可以设置4个属性值，分别代表盒子的上、右、下、左一样，背景同时设置多个属性值时也是有顺序的我今天要仔细康康。
1.background有8个属性，其中有3个是css3中新增的属性
| background-color | 指定要使用的背景颜色 | 1 |
| background-position | 指定背景图像的位置 | 1 |
| background-size | 指定背景图片的大小 | 3 |
| background-repeat | 指定如何重复背景图像 | 1 |
| background-origin | 指定背景图像的定位区域 | 3 |
| background-clip | 指定背景图像的绘画区域 | 3 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-image | 指定要使用的一个或多个背景图像 |
说明：一个背景声明中可以设置所有的背景属性，而且各个属性的设置是不分先后顺序的，用空格分隔就可以，但是background-position和background-size比较特殊，如果需要同时设置这两个属性，写法必须为background-position/background-size否则背景就会设置无效
书写格式
background:bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment
<style>
.aboutBg{
width: 200px;
height: 500px;
border: 10px dotted black;
padding:35px;
background: #1AC56C no-repeat border-box padding-box url("../imgs/biaoduan.png") left center/200px 29px scroll;
}
</style>
<body>
css 背景属性
<div class="aboutBg">
背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性
背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性
背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性
背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性背景属性
</div>
</body>
设置效果
2.当然属性也可以单独设置，也就是不用简写，各个属性详细说明如下
- background-image
| url('URL') | 图像的URL |
| none | 无图像背景会显示。这是默认 |
| linear-gradient() | 创建一个线性渐变的 "图像"(从上到下) |
| radial-gradient() | 用径向渐变创建 "图像"。 (center to edges) |
语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
| repeating-linear-gradient() | 创建重复的线性渐变 "图像"。 |
语法：background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
| repeating-radial-gradient() | 创建重复的径向渐变 "图像" |
语法：background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);
| inherit | 指定背景图像应该从父元素继承 |
背景图片有多个属性,最长用是url("");使用url("")可以同时设置多个背景图片，多个背景图片之间用逗号分隔开来。
写法一：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aboutBg {
width: 200px;
height: 300px;
border: 1px solid #3d3d3d;
background: url("imgs/biaoduan.png") left top no-repeat, url("imgs/floor.png") right top no-repeat;
}
</style>
</head>
<body>
css 背景属性
<div class="aboutBg"></div>
</body>
写法二：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aboutBg {
width: 200px;
height: 300px;
border: 1px solid #3d3d3d;
background-image: url("imgs/biaoduan.png"), url("imgs/floor.png");
background-position: left top,right top;
background-repeat: no-repeat,no-repeat;
}
</style>
</head>
<body>
css 背景属性
<div class="aboutBg"></div>
</body>
多背景效果
背景图片除可以设置图片外还可以自定义渐变背景效果
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aboutBg {
width: 200px;
height: 300px;
border: 1px solid #3d3d3d;
/*linear-gradient第一个参数是方位或者角度，如果没有，默认是从上到下渐变*/
/*方位可以为to right，to left，to bottom right或者角度0deg,90deg,180deg等*/
background-image: linear-gradient(#FA2E0A,#FAA20A,#F2FA0A,#17FA0A,#0D9898,#0D2998,#8E0D98);
}
</style>
</head>
<body>
<div class="aboutBg"></div>
</body>
纵向由上到下渐变
- background-attachment(设置背景图片是否随元素内容滚动)
属性值：
| scroll | 背景图片随着页面的滚动而滚动，这是默认的。 |
| fixed | 背景图片不会随着页面的滚动而滚动。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
| initial | 设置该属性的默认值。
| inherit | 指定 background-attachment 的设置应该从父元素继承。
- background-clip(指定绘图区的背景，其实也就是背景颜色设置的区域是哪一块)
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。--边框border也有背景颜色
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。--border没有背景颜色从padding开始有
content-box 背景绘制在内容方框内（剪切成内容方框）。--padding也没有，只有内容的部分有
- background-color（设置背景颜色所有人最熟悉的了）
| color | 指定背景颜色。
| transparent | 指定背景颜色应该是透明的。这是默认 | --也许在cssreset时会用到吧
| inherit | 指定背景颜色，应该从父元素继承 |
- background-origin（设置背景图片与内容框的相对位置，注意这个只针对背景图片的）
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像内容框的相对位置的注：background-Origin属性指定background-position属性应该是相对位置。
如果背景图像background-attachment是"固定"，这个属性没有任何效果。
- background-position(设置背景图片的起始位置，雪碧图背景必备选项可以用像素，也可以用百分比，还可以用top，left，center，right，bottom关键字设置)
background-position属性设置背景图像位置。如果指定的位置是没有任何背景，图像总是放在元素的左上角
注：对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）"，浏览器兼容时应该注意
-background-repeat(设置背景图片是否重复以及怎么重复)
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repea属性设置应该从父元素继承
- background-size(设置背景图片的大小)
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最大大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最小大小。
- background-blend-mode(待研究，我也没有用过)
网友评论