css中background(背景) 属性的特点介绍1

[摘要]本篇文章给大家带来的内容是关于css中background(背景) 属性的特点介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。简写顺序：color-image-repeat-at...

本篇文章给大家带来的内容是关于css中background(背景) 属性的特点介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

简写顺序：color-image-repeat-attachment-position

eg:body{background:#ffffff url('img.png') no-repeat right top}

下来按顺序介绍每个属性特点：

一、background-color：red；#ffffff；rgb（255,255,255）；

三种颜色表示方法，分别是颜色名，十六进制和RGB；可以为所有元素设置背景色；默认透明。

二、background-image：url（‘img.jpg’）

图片地址可以是相对路径也可以是绝对路径；默认平铺重复显示；

三、background-repeat：repeat-x；repeat-y；no-repeat；

默认平铺重复显示；

四、background-attachment:scroll;fixed;local;inherit;

background-attachment的意思是指背景图像是否固定或者随着页面的其余部分滚动；默认scroll；

scroll是指背景图片随着页面其余部分滚动；fixed为固定；inherit是从父元素继承；local是随滚动元素滚动。

五、background-position：bottom center;top;66% 33%;50px 100px;

4种表示法：一是top，left，bottom，right，center组合；二是一个值，系统默认为center；三是百分比；四是直接写像素。

后两种精确度高。

六、background-clip:border-box;padding-box;content-box;规定背景图的绘制区域。

七、background-origin:border-box;padding-box;content-box;规定背景图的定位区域。

注意：如果背景图像background-attachment是“固定”，这个属性没有任何效果。

八、background-size:auto(默认);length(两个值，一个宽一个高，一个值的话默认第二个是auto);percentage（赋值原理同length）;cover（此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小）;contain（此时保持图像的纵横比并将图像缩放成将适合背景定位区域的最小大小）;