CSS背景的相关属性

背景的属性：

• background-color ：设置背景颜色

 #div1{
     background-color:red;
 }

• background-image：设置背景图片

 #div1{
     background-image:url(img/bg_1.png);
 }

• background-size：设置背景图片的尺寸
  
  • cover(覆盖)：图片等比例缩放，直到最小部分填满容器有可能会出现图片显示不全的效果
  • contain(包含)：图片等比例缩放，直到最大部分填满容器有可能会出现图片覆盖不完整的效果
  • length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”

 #div1{
     background:url(img/bg_1.png) no-repeat;
     background-size:100% 100%;
 }

• background-repeat：规定背景图片按什么方式重复排列
  
  • repeat 默认。背景图像将在垂直方向和水平方向重复。
  • repeat-x 背景图像将在水平方向重复。
  • repeat-y 背景图像将在垂直方向重复。
  • no-repeat 背景图像将仅显示一次。
• background-position：设置背景图像的起始位置（偏移量）
  
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • 当只指定x或y中的一个方向时，另一个方向默认是居中效果
  • 也可以是x% y% 或两个长度数值形式
• background-origin：图片开始位置（相对于什么位置来定位）
  
  • border-box:从外边框处开始
  • padding-box:从内边距处开始
  • content-box:从内容处开始
• background-clip：背景图片的剪切开始位置
  
  • border-box:从外边框处开始
  • padding-box:从内边距处开始
  • content-box:从内容处开始