color 纯色
background: #EFEFEF; // 直接写颜色或16进制色号
background-color: gray;
image 背景图
background: url(xxx/xxx.jpg);
background-image: url(xxx/xxx.jpg);
设置背景时的一个小技巧:
background: #081d5e url(xxx/xxx.jpg);
在开发过程中, 用图片作背景时, 往往还要用图片的主色调作元素的背景色;
目的: 防止背景图丢失, 导致页面的视觉效果变化过大.
repeat 是否重复
当背景图比所在元素尺寸小时, 会重复铺排.
background: #081d5e url(xxx.jpg) no-repeat; // 不重复
background: #081d5e url(xxx.jpg) repeat-x; // 横向平铺
background: #081d5e url(xxx.jpg) repeat-y; // 竖直方向平铺
background: #081d5e url(xxx.jpg) repeat; // 水平、竖直方向都平铺 不写repeat也默认此效果
attechment 滚动效果
兼容性差, 用得少
background: #081d5e url(xxx.jpg) no-repeat fixed; // 性对于屏幕, "钉住"
background: #081d5e url(xxx.jpg) no-repeat scorll; // 跟着所在元素走 (默认效果)
计算机里的坐标
数学中的坐标, x轴往右为"+", y轴往上为"+"
计算机的坐标, x轴往右为"+", y轴往下为"+"
※ 如果用一个比元素大的图片作背景, 图片与元素是如何重合的?
或者说, 用图片的哪一部分作元素的背景?
默认是把背景图的原点 与 元素的原点重合 (从左上角开始对齐)
元素有多大, 自然截出多大的背景图
position 背景图的位置
通过背景的position属性来实现多个元素共用一张背景图的效果:
目的or好处?
作用:在大网站非常常见, 可以节省很多次的请求, 把众多背景图的请求压缩为1次;
因为大网站每天访问量都可能上亿, 这时的性能提升就很明显.
#jiantou {
width: 30px;
height: 25px;
background: url(126.gif) 0 -40px;
}
...
<div id="jiantou"></div>
其实就是计算: 背景的原点相对于元素的原点的坐标关系.
2012_d1_①_021
