css背景样式规则

css背景规则

• background-color 背景颜色
  transparent 透明（默认）
  颜色

• background-image 背景图片
  none 默认无
  url(“ ”) 图片地址
  背景渐变颜色
  background-image：linear-gradient（颜色1，颜色2）
  由颜色1过渡到颜色2

    	background-image：linear-gradient（
    		transparent,
    		rgba(0,0,0,.6）
    	);
  

• background-repeat 背景平铺
  repeat 重复
  no-repeat 不重复
  repeat-x x轴上重复
  repeat-y y轴上重复

• background-position 背景图片位置
  x y 中间空格隔开

  1）参数为方位名词：方位名词与顺序无关
  center top right bottom left
  当只有一个方位名词时，默认第二个参数为center

   background-position：left  bottom；
   background-position：right； /*默认第二个参数值为center*/
  

  2）参数为精准的数据： x y 顺序改变效果不同
  当只有一参数时，默认该参数为x，默认y为垂直居中

   background-position：100px  50px；
   background-position：100px； /* 默认x值为100px,默认y轴为center垂直居中*/
  

  3）参数为混合参数：顺序不可改变

  background-position：100px  center；
  

• background-size 背景图片大小
  length 设置背景图片高度和宽度。第一个值设置宽度，第 二个值设置的高度。
  如果只给出一个值，第二个是设置为 auto(自动)。

       background-size: 100px 150px;
  

  percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。
  如果只给出一个值，第二个是设置为"auto(自动)"

   	background-size: 100%  75%；
  

  cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

  contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

• background-attachment 背景图像固定（背景图像是否固定或随着页面其余部分滚动）
  scroll 默认滚动
  fixed 固定

• background-clip ⽤于设定背景裁切的⽅式
  border-box 背景被裁剪到边框盒
  padding-box 背景被裁剪到内边距框
  content-box 背景被裁剪到内容框

• background-origin ⽤于设定背景铺设的起点
  border-box 背景图像相对于边框盒来定位
  padding-box 背景图像相对于内边距框来定位
  content-box 背景图像相对于内容框来定位

• background 背景属性复合写法
  background：颜色 图片地址 平铺 图像滚动 图片位置 ； （用空格隔开）
  background: color url repeat scroll position/size;
  当盒子大小与背景图片大小相同时，可以直接写为background：url();

单独的属性需要写在复合属性的下方，否则复合属性会覆盖上方的单独属性。

• 设置背景色半透明
  background：rgba （ r , g , b, 透明度）
  透明度：0 ~ 1 （0为透明色，1为完全不透明）

   background：rgba（0，0，0，.8）；(小数点前的0可以省略）
  

img标签和background样式的区别
img标签不设置宽高就可以直接显示图片，默认显示图片本身的大小；

img用于实现网页中重要的图片。

盒子设置background属性，若盒子没有设置宽高，则不会显示出背景图片，因为背景图片只是装饰盒子的样式，不能撑开盒子，需要给盒子设置宽高才能显示出背景图片