CSS学习笔记（四）：背景

背景

单色背景

通过background-color设置背景颜色，值可以为rgb通道或者颜色编码，rgb通道可以设定透明度

article{    
background-color: royalblue;    
/* 单词替代颜色编码 */
}
article{    
background-color: #ddddd1;   
 /* 颜色编码 */
 }
article{    
 background-color: rgb(192, 30, 111);   
  /* rgb通道 */
}

图片背景

通过background-image设置背景图片，注意图片不会撑开元素，不会改变元素大小

背景裁剪

在默认情况下，背景会填充整个border内部，通过背景裁剪可以限定背景的填充范围，通过background-clip进行背景裁剪设定。
有以下值：

• content-box //填充内容部分
• padding-box //填充到border内侧
• border-box //填充到border外侧

背景的滚动与重复

重复

当背景图片小于填充范围的时候，默认会进行重复，可以通过background-repeat进行的设定

• repeat：默认的重复
• no-repeat：不重复
• repeat-x：按照x轴重复
• repeat-y：按照y轴重复

背景的滚动