css background的多种属性详解

转自：https://blog.csdn.net/web_xiaolei/article/details/78226830

css的background属性由以下属性组成：

background-color：背景色
background-image：背景图片
background-size：背景图片尺寸
background-repeat：背景图片重复(repeat,repeat-x,repeat-y,no-repeat)
background-position：背景图片位置
background-attachment：背景图片是否固定不动
background-clip：背景覆盖区
background-origin：背景图片覆盖区

  

其中比较常用的是：

background-color：背景色
background-image：背景图片
background-repeat：背景图片重复
background-position：背景图片位置
background-color

    颜色名称，如：background-color:red;
    十六进制背景色，如：background-color:#ff0000; / background-color:#f00;
    rgb颜色，这里如果是rgba，a表示透明程度，为0全透明，为1全显示，如：background-color:rgb(255,0,0); / background-color:rgba(0,0,255,0.8);
    transparent，透明，如：background-color:transparent;

background-image

    url图片地址，可以多个图片，如：background-image: url(img/a.jpg),url(img/b.jpg);
    none，不显示背景图像

background-repeat

    repeat：水平和垂直方向都重复图像，如：background-repeat: repeat;
    repeat-x：水平方向重复图像
    repeat-y：垂直方向重复图像
    no-repeat：图像不重复

background-position

    位置名字组合定位，只写一个默认另一个为居中，如：background-position: right bottom; / background-position: center;
    百分比位置，如：background-position: 20% 20%;
    具体像素位置， 如：background-position: 20px 20px;

background-attachment

    scroll：背景图像相对于页面不动，会随着网页的滚动而移动，默认
    fixed：背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动，如：background-attachment: fixed;

background-size

    像素大小，只写一个默认另一个为auto，如：background-size: 200px 100px;
    百分比大小，如：background-size: 60% 60%;
    cover：背景图像覆盖当前元素的所有背景区域，如：background-size: cover;
    contain：图像显示最大且刚好完全显示，一般不能覆盖全部背景区

background-clip

    border-box：背景覆盖到边框区域，如：background-clip: border-box;
    padding-box：背景覆盖到padding区域
    content-box：背景只覆盖到content部分

background-origin

    border-box：背景图像的起始位置在边框处，如：background-origin: border-box;
    padding-box：背景图像的起始位置从padding处开始
    content-box：背景图像的起始位置从content处开始

当所有的这些属性都放到一行显示：

背景颜色#8a9，背景图像3.jpg，靠上居中，图片宽200px，高自适应，不重复，背景覆盖到content。
html主要代码：

 

1、css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧

 

2、css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧

 

css主要代码：

div{
  width:300px;
  height:400px;
  padding: 20px;
  border: 6px dashed #f9f;
  background: #8a9 url(img/3.jpg) top /200px fixed no-repeat content-box;
}

 

不过，这里由于background-origin和background-clip的属性值是一样的，所以在这里写两个参数的话只有后面一个起作用，且背景色和背景图像都按后面一个参数去显示。
结果如下：
未开始滚动网页：
未开始滚动网页
开始滚动网页：
滚动网页