css 背景图片的定位？

html-css013

css 背景图片的定位？,第1张

关键字, 例如: background-position: top right

优点: 直观, 可用性高, 各浏览器中表现一致.

缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制

像素, 例如: background-position: 0px 0px

优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.

缺点: 你必须知道确实的值.

原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.

百分比, 例如: background-position: 80% 50%

优点: 可以使用数学来控制定位, 并且比像素定位更加灵活.

缺点: IE 中无法处理复杂的百分比定位. 

原理, 如图. 与像素定位不同, 它的百分比位置是指容器和图片内部的相应位置作为显示的位置.

根据你的图片做了下面的样式，主要做法是定位，切割图片，可以使用windows的画图工具先定位每个你需要的图片的位置（在下面的状态栏有坐标，得到的坐标前面加上一个负号），图片左上角为x/y对应的0/0，background-image：相对地址指定背景图像，background-position：指定背景图像位置，下面是例子，这个要多练习研究就会了。多看看CSS方面的说明.icon {background-image: url(back_image.png)}.head {height: 26pxbackground-position: -42px -222pxbackground-repeat: no-repeat}.btn {cursor:pointerborder:0width: 107pxheight: 26pxbackground-image: url(back_image.png)background-position: -42px -222pxbackground-repeat: no-repeat}<div style="width: 107pxheight: 200px"<div class="icon head" style="line-height: 26pxpadding-left: 20px"这是头部</div这里是内容！</div</div/<input type="button" class="btn" value="按钮"