z-index
当元素开启定位以后就可以设置z-index这个属性。
这个属性可以提升定位元素所在的层级。
z-index可以指定一个整数作为参数,值越大元素显示的优先级越高,也就是z-index 值较大的元素会显示在网页的最上层

background-image
background-image可以为元素指定背景 图片。
和background-color类似,这不过这里使用的是一个图片作为背景。
需要一个url地址作为参数,url地址需要指
向一个外部图片的路径
background-repeat
background-repeat用于控制背景图片的重复方式。
如果只设置背景图片默认背景图片将会使
用平铺的方式,可以通过该属性进行修改。
可选值:
–repeat:默认值,图片左右上下平铺
–no-repeat:只显示图片一次,不会平铺
–repeat-x:沿x轴水平平铺一张图片
repeat-y:沿y轴水平平铺一张图片


background-position
background-position用来精确控制背景 图片在元素中的位置。
可以通过三种方式来确定图片在水平方向 和垂直方向的起点。
–关键字:top right bottom left center
–百分比
background-attachment
background-attachment用来设置背景图 片是否随页面滚动。
可选值:
–scroll:随页面滚动
fixed:不随页面滚动
CSS Sprite(雪碧图)
CSS Sprites是一种网页图片应用处理方式。
通过这种方式我们可以将网页中的零星图 片集中放到一张大图上。
这样一来,一次请求便可以同时加载多张图片,大大提高了图片的加载效率。
网友评论