css背景属性background可以设置网页的背景色和背景图片。
background有以下这些属性
| 属性 | 说明 | 示例 |
|---|---|---|
| background-color | 设置背景色 | background: #000000; |
| background-image | 设置背景图片 | background-image: url(logo.jpg) ; |
| background-repeat | 设置图片的平铺方式 | background-repeat: no-repeat; |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动 | background-attachment: fixed; |
| background-position | 设置背景图像的开始位置。 | background-position: right bottom; |
| background-size | 设置图片的尺寸 | background-size: 50% 100%; |
| background-origin | 设置图片的定位方式 | background-origin: padding-box; |
我们可以通过上面的属性单独设置背景的css样式，比如单独设置它的背景图片和背景图片的尺寸和定位方式。
background也有他自己的语法，它是一个简写属性，我们可以一次性设置上面这些属性，如下：
background:color image position/size repeat bg-origin bg-clip bg-attachment;即
background: 颜色 图片 位置/大小 平铺方式 bg-origin 绘制区域 bg-attachment;- 如果不设置其中的某个值，也不会出问题，比如background: #fff;也是允许的。
- 顺序并非固定，设置的顺序没有要求。
- background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。
- 如果同时使用 background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置一个值。
<!DOCTYPE html>
<html>
<title>css background属性例子</title>
<head>
<style>
div
{
color:#fff;
width:300px;
height:200px;
background: gray url(/static/default/yxjc/css/good-morning.jpg) no-repeat fixed left top;
}
</style>
</head>
<body>
<div>
css background属性例子
</div>
</body>
</html>
提倡url后面的地址不要加引号 url(/static/default/yxjc/css/good-morning.jpg)