CSS背景知识

106 阅读1分钟

一,背景属性

1,背景色

key:background-color;

value:颜色;

2,背景图片

key:background-image;

作用:给盒子添加图片的背景修饰 加载范围:默认border及以内部分;后期如果图片给不重复加载background-repeat:no-repeat;加载就从border以内开始;

value:url(图片路径);

3,背景重复

key:background-repert;

作用:设置添加的背景图是否要在盒子中重复加载,根据属性值的不同有四种加载方式;

value说明
repeat重复
no-repeat不重复
repeat-x水平重复,使背景图片水平铺满
repeat-y垂直重复,垂直重复,使背景图片垂直铺满

4,背景定位

key:background-position;

作用:主要用于设置不重复的图片在背景区域的加载开始位置; value:以左上角顶点为原点单词、像素 value都是代表方向的单词进行书写; 水平方向:left、center、right 垂直方向:top、center、bottom background-position;x y ;

他给的是背景图片的定位以及设置大小;

5,背景附着

属性名:background-attachment

作用:设置背景图片是否随着页面滚动

属性值:scroll、fixed(固定)

6,background综合写法

属性值:可以有1-5个属性值,值之间用空格隔开,背景定位的两个属性值不能被分开写,算作其中的一个属性值,五个属性值位置可以随意书写

background-position;left bottom;