标签:
CSS中的背景,类似于Adobe PS中的图层概念。背景为元素添加背景颜色和背景图片提供了支持,实际上每个HTML元素由前景层和背景层组成
前景层包括内容和边框,背景层包括背景色和背景图
HTML盒模型的三维透视图如下
每个HTML盒子,都有以下的CSS属性
可以用这些属性来控制HTML盒子的背景细节
用来设置盒子的背景色
body{background-color: darkcyan;}
上面的代码,可以将整个页面设置为darkcyan色
设置元素的背景图片
p{background-image: url("dist/img/star.ico")}
上面讲p元素的背景设置了一张图片,默认情况下,图片会从盒子的左上角,沿水平和垂直方向重复出现,最终将填满整个背景区域
控制背景重方式
它有六个值,默认值是repeat即在水平和垂直方向上都重复,另外三个值repeat-y(沿y方向重复),repeat-x(沿x方向重复),no-repeat(不重复)。示例
body{background-image: url("dist/img/star.ico");background-repeat: repeat-y}
为盒子添加背景图,并设置图片只在y方向上重复
另外两个值是round和space,
round调节图片大小适应背景,确保图片不被剪裁
space添加空白适应背景,确保图片不被剪裁
更改背景出现的位置
background-position有五个值,任何两个值组合起来,可以控制元素背景的位置
标签:
原文地址:http://www.cnblogs.com/tao-zi/p/4701520.html