ch4 背景图像基础
如果希望网站有一个好看的背景,只需将背景应用于主体元素,即在body上应用background-image,默认情况下浏览器水平和垂直的重复显示背景图像,让图像平铺在整个页面上,可以选择背景图像是垂直平铺、水平平铺、不平铺。
如果希望在网页的开头显示一个人大的品牌图像,且不包含人格信息,是纯表现性的,那么实现的方式是创建一个“钩子”,即为该图像创建一个空div,并给该div设置尺寸与图像相同,指定图像不重复。
#branding{ width:700px; height:200px; background-image:url(/img/branding.gif); background-repeat:no-repeat; }
设置背景图像的位置:如下图,假设要在站点的额每个标题上添加一个项目符号
![](http://upload-images.jianshu.io/upload_images/7693255-c0cbaacd40e3b4e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
h1{ padding-left:30px; background-image:url(/img/bullet.git); background-repeat:no-repeat; background-position:left center; }
关键词left、center指出了图像的位置,除了用关键词之外,还可以使用像素或百分数来设置背景图像的位置(faux列中也有同样的定义)。
- 使用像素设置背景的位置:图像的左上角会定位在距离元素左上角指定像素数的地方。
- 使用百分数定位:会对图像上的对应点进行定位,例如:将垂直和水平位置设置为20%,那么实际上会把图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。
![](http://upload-images.jianshu.io/upload_images/7693255-56ec4ef65268c650.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
使用百分数实现前面的项目符号示例,需要将垂直位置设置为50%,就会使得项目符号图像垂直居中:
h1{ padding-left:30px; background-image:url(/img/bullet.git); background-repeat:no-repeat; background-position:0 50%; }