CSS背景属性简单整理

CSS背景属性

• background>>在一个声明中设置所有的背景属性

//一般按以下顺序书写
body{
    background:red url('') no-repeat fixed center;
}

　

<!--通过设置背景颜色实现线性渐变效果，语法为：linear-gradient(角度,开始颜色,结束颜色)-->
body{
    background:linear-gradient(90deg,red,yellow);
}

 

• background-attachment>>设置背景图像是否固定或者随着页面的其他部分滚动

  属性值： 
  - scroll 默认值。背景图像会随着页面其余部分的滚动而滚动。（图像相对元素固定） 
  - fixed 当页面其余部分滚动时，背景图像不会移动。（图像会浮于元素内容之上，相对于视口固定） 
  - local 背景和内容一起滚动。（图像相对于元素内容固定） 
  
  

• background-color>>设置元素背景颜色

  属性值： 
  - color_name 规定颜色值为颜色名字（如red） 
  - hex_name 规定颜色值为十六进制（如#ccc） 
  - rgb_name 规定颜色值为rgb值（如rgb(255,0,0)） 
  - transparent 默认，背景颜色为透明 
  
  

• background-image>>设置元素的背景图像

  属性值： 
  - url(”) 指向图像的路径 
  - none 默认值，不显示背景图像 
  
  

• background-position>>设置背景图像的开始位置

  属性值： 
  - top left 
  - top center 
  - top right 
  - center left 
  - center center 
  - center right 
  - bottom left 
  - bottom center 
  - bottom right 
  - 以上若只设置了一个值，第二个值则默认为“center” 
  - x% y% 若只设置了一个值，第二个值则默认为50% 
  - xpos ypos 若只设置了一个值，第二个值则默认为50%（可以混合使用%和position值） 
  
  

• background-repeat>>设置是否及如何重复背景图像

  属性值： 
  - repeat 默认，背景图像将在垂直方向和水平方向重复 
  - repeat-x 背景图像将在水平方向重复 
  - repeat-y 背景图像将在垂直方向重复 
  - no-repeat 背景图像将仅显示一次 
  
  

• background-clip>>规定背景的绘制区域

  属性值： 
  - border-box 默认值，背景被裁到边框盒 
  - padding-box 背景被裁到内边距框 
  - content-box 背景被裁到内容框 
  
  

• background-origin>>规定背景图片的定位区域

  属性值： 
  - padding-box 默认值，背景图像相对于内边距框来定位 
  - border-box 背景图像相对于边框盒来定位
  - content-box 背景图像相对于内容框来定位 
  
  

• background-size>>规定背景图片的尺寸

  属性值： 
  - length 设置背景图像的宽、高（若只设置一个值，高则定义为auto） 
  - percentage 以父元素的百分比来设置背景图像的宽度和高度（若只设置一个值，高则定义为auto） 
  - cover 保持图片本身比例，横向铺满父元素 
  - contain 保持图片本身比例，纵向铺满父元素