点击上方“web后端网页设计”关注，即可掌握更多网页设计UI设计Html div css HTML5+CSS3、JavaScript、JQuery、PHP、mysql、帝王CMS建站教程。
我们在研究其他网站的风格时，经常会发现一种情况，就是在很多背景属性中调用同一张图片来满足网页各个部分的使用。 打开这些图片看一下，你会发现这张图片里包含了很多小图片，比如：
另一个例子：
这些小图就是整个图被分割后的部分。 将每个部分放在一张图片上，而不是将它们存储为单独的图片。 目的我们都知道，就是减少http请求次数，节省时间和带宽。 。
那么如何实现一张图片只显示一部分在不同的地方，这就用到了我们明天讲的背景图片的定位。 相信很多人都纠结过这个问题，也经常有同学问我，那么明天我就系统的讲一下：
我们知道，当使用图片作为背景时，css应该这样写。 以div容器为例，也可以是body、td、p等的背景，道理是一样的。
代码：
div{ 背景:#FFF url(图片) 不重复固定 xy;}
这里背景的属性值如下：
#FFF背景色：（颜色值，没有覆盖背景图的地方css 底部对齐，或者没有背景图时的背景色）
图片背景图片：（这里是图片的地址）
no-repeat是否重复：（当图片大于容器大小时，默认会重复排列图片填满容器。no-repeat表示不重复。此时只有旁边的定位坐标才有用时间。）
固定背景是否随容器滚动：（有两个可选值，scroll滚动，fixed不滚动，默认scroll）
xy背景图的定位：（注意定位只有在不重复的情况下才有意义。这个是明天的重点）
背景图片定位需要明确的几点：
1、两个值后面的那个是垂直定位，我们称之为x轴定位。 后一个值是水平定位，我们称之为y轴定位。 如果只有一个值，则默认为 x 轴方向。 此时y轴方向默认上下对齐，即居中。
2、坐标轴原点为对应容器的左顶点。
3、该坐标的y轴箭头朝下，即右下角（容器内部）的xy值均为正值。
4. xy值代表背景图像的左顶点相对于坐标原点（即容器的左顶点）的值。
5、xy的值可以用ratio或px来表示。
6、xy也可以用“左、右、上、下、中”五种对齐方式表示，但注意：用“左、右、上、下、中”表示时，对齐是应用规则，而不是坐标规则。 当x为left时，表示图片的右侧与容器的左侧对齐。 当它为right时，表示图片的右侧与容器的侧面对齐。 当y为top时，表示图片的底部与容器的底部对齐。 当为bottom时，表示图像顶部与容器顶部对齐，当xy等于center时，表示居中。
7、当xy用比例或px表示时，其值可以是正数。 通过应用坐标规则，我们可以很容易地理解正数的含义。 当x为正数时，表示图片的左顶点位于容器左顶点的右侧。 当y为正数时，表示图片的左顶点在容器左固定点的上方。 。 也就是说，向左和向下超出容器的边界。
[下一个]
下面我用几张图来说明几种情况。 蓝色块代表图片，虚线框代表容器（可以是div、td，也可以直接是body）。 请注意，容器中只能看到背景图像。 我用红色表示可见部分，超出容器范围的部分是不可见的，我用红色表示。 容器左固定点的坐标为(0, 0)。
第一个中，背景图片与内容的左上角对齐，0px 0px 也可以写成left top
第二张图中，背景图像位于容器中间，定点坐标为正值
第三张图中，背景图像部分在容器的左上方，定点坐标为负值
-------------------------------------------------- ------------------------
至此，我们就大概明白了如何利用背景中的定位值来准确定位背景图片了。 回到一开始介绍的两张图片，我们可以通过：背景定位和容器中的visible属性来随意调用整个图片的某个部分。
但为了方便调用，我们在排列这样的小图片时需要注意一些规则。 比如小图片之间的距离一般是调用小图片的容器的大小css 底部对齐，或者距离大一些，这样可以防止显示我们不喜欢显示的图片！
还有一点需要补充的是，如果使用比例来定位的话，算法是特殊的。 我举一个反例：
代码：
背景:#FFF url(图片)不重复固定50%-30%;
这时候图片应该在容器的什么位置呢？ 算法公式如下：
图片左顶点距容器左顶点的坐标位置为
x：（容器长度-图片长度）x50%
y:(容器高度-图片高度)x(-30%)
将坐标法应用于获得的结果。 如果差值为正数且百分比为正，则运算结果为负值。 如果差值为正且百分比也为正，则运算结果为负。 总而言之，这里的操作符合算法。 将运算结果代入坐标律即可得到图片的位置。
例如：容器宽度为：600px； 高度：600 像素； 并且图片宽度为：200px； 高度：200px；
我们使用之前的样式，可以得到图片位置为：
x: (600px-200px)*50%
y: (600px-200px)*(-30%)
如下所示：
发表评论