css3基础-背景
2019-12-27 16:59:29 来源：admin 点击：833
background-image
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
等价于：
<style>
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
</style>
background-size
background-size：水平px/% 垂直px/%
background-position
值 | 描述 |
· top left · top center · top right · center left · center center · center right · bottom left · bottom center · bottom right | 如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。 |
x% y% | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。 |
background-Origin（定位区域）
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box, border-box区域内可以放置背景图像。
background-clip（绘制区域）
background-clip背景剪裁属性是从指定位置开始绘制。
取值有content-box, padding-box, border-box
background-repeat
值 | 描述 |
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
background-attachment（页面滚动）
值 | 描述 |
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
多重背景
语法缩写如下：
background：[background-color]，[background-image]，[background-position][/background-size]，[background-repeat]，[background-attachment]，[background-clip]，[background-origin],...
可以把上面的缩写拆解成以下形式：
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
注意：
*用逗号隔开每组 background 的缩写值；
*如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
*如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
*background-color 只能设置一个。