html css中背景属性详解

背景颜色

属性解释	属性和值	例子
baockground-color: transparent/颜色值	背景颜色	background-color: #f3f;

注意：

• 背景包括内填充和边框、不包括外边距
• 默认背景图片位于元素左上角，并在水平和垂直方向上重复
• background-position的值如果只有一个，默认第二个为50%居中

背景图片

属性解释	属性和值	例子
图片背景	background-image: none/URL	background: url(img/i.jpg)
图像如何重复	background-repeat: repeat/no-repeat/repeat-x/repeat-y	background-repeat: no-repeat
图像随页面滚动	background-attachment: scroll/fixed	background-attachment: fixed
图片起始位置（默认值:0% 0%）	background-position: 百分比1 百分比2 background-position: px值1 px值2 background-position: top/right/bottom/left/center	background-position: 10% 20% background-position: 12px 15px background-position: center

背景简写

/* background: color image repeat attachment position; */

div {
	background: #ff22ff url("icon.png") no-repeat right top;
}

• 不分先后顺序，没有用到的属性可以不写

背景图片缩放

.img {
    background-size: cover;  /* 保持宽高比，自动缩放到完全覆盖区域 */
    background-size: contain;  /* 保持宽高比，自动缩放但不能越过区域 */
    background-size: 200px 200px;  /* 指定图片大小 */
    background-size: 40% 60%; /* 指定图片放置的大小(百分比是按载背景图的元素大小计算) */
}