CSS背景

   通过CSS背景属性，给页面中的元素添加背景样式；背景属性可以设置背景图片，背景平铺，背景颜色，

背景图像位置，背景图像固定等。

  背景颜色：

background-color: transparent  |  color; 透明色或其他颜色

transparent是默认值；

  背景图片：

  运用背景图片而不是插入图片，因为很好控制位置，嘻嘻

  background-image: none |  url(url);  默认是none

  背景平铺：

  在页面上对背景图片进行平铺（复制），可以使用background-repeat属性，沿x轴或Y轴进行平铺；

  background-repeat: repeat | no-repeat | repeat-x |repeat-y ; 默认值是repeat

  页面既可以添加背景图片也可以添加背景颜色，只不过背景颜色在最底层；

  背景图片位置：

  background-position: x  y ; x坐标和y坐标，可以使用方位名词或精确单位

  方位名词：position  值的前后顺序无关

  left   center  right  top  buttom  center

  若只写一个值，那么另一个默认为center

  精确单位：length

  百分数 | 由浮点数和单位标识符组成的长度值

 

问：为何使用背景图片而使用插入图片？

答：当图片尺寸大于浏览器显示尺寸时，使用background-position: center top;可使图片核心内容

显示在浏览器上，方便调整位置，但插入图片标签很难实现这个效果。

 

背景图像固定：

background-attachment: scroll  |  fixed;

 

背景复合写法：

background:  color  image  repeat   attachment  position ; 

 

背景颜色半透明：

CSS3提供的写法，实现背景颜色半透明

background: rgba(0, 0,0,0.3)

最后一个值是透明度 0~1 ， 1 不透明

0.3也可写为.3

 

欢迎补充