CSS 图片偏移

html-css021

CSS 图片偏移,第1张

首先你要知道要截取的图片在整张图片中的偏移量以及大小。然后：

<div style="width:wwwpxheight:hhhpxbackground:url(图片url) no-repeat -lllpx -tttpx"></div>

其中www是要截取的小图片的宽度，hhh则是高度；

lll是小图片的左边在大图片的偏移量，ttt则是上边的偏移量。

请注意负号不能省略！

三种定位机制使用了4个属性来描述定位元素各边相对于其包含块的偏移。这4个属性被称为偏移属性。

top/right/bottom/left

值: <length>| <percentage>| auto | inherit

初始值: auto

应用于: 定位元素(也就是position值不是static的元素)

继承性: 无

百分数: 对于top和bottom，相对于包含块的clientHeight；对于right和left，相对于包含块的clientWidth

这些属性描述了距离包含块最近边的偏移。top描述了定位元素上外边界离其包含块的顶端有多远。如果top为正值，会把定位元素的上外边距边界下移，若为负值，则会把定位元素的上外边距移到其包含块的顶端之上。类似地，left描述了定位元素的左外边距边界在其包含块左边界右边(正值)或左边(负值)有多远。如果是正值，会把定位元素的外边距边界移到包含块左边界右边，而负值则将其移到包含块左边界左边。所以，正值会导致向内偏移，使边界朝着包含块的中心移动，而负值会导致向外偏移。

偏移定位元素的外边距边界时，带来的影响是元素的所有一切(包含外边距、边框、内边距和内容)都会在定位的过程中移动

[注意]定位元素的边界是指定位元素margin外侧的边界；包含块的包含区域是指包含块的border内侧的padding+content区域

希望我的回答可以帮到您哦