CSS 图片偏移 div css里怎么让一个图片在任意位置，比如靠居中在偏下，

css \u56fe\u7247\u504f\u79fb\u95ee\u9898

\u628a\u6bcf\u4e00\u5c0f\u683c \u90fd\u5f15\u5165\u80cc\u666f \u4f8b\u5982\uff1a
background-image: url(bgimage.gif);\u518d\u5206\u522b\u5bf9\u683c\u5b50\u505a\u80cc\u666f\u56fe\u7247\u5b9a\u4f4d \u4f8b\u5982\uff1a
background-position:0px 0px; /* \u8fd9\u91cc\u7684\u4f4d\u7f6e\u548c\u56fe\u7247\u76f8\u5bf9\u5e94 */

\u8ba9\u4e00\u4e2a\u56fe\u7247\u5728div\u4efb\u610f\u4f4d\u7f6e\uff0c\u53ef\u4ee5\u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d\u7684\u65b9\u5f0f\u3002\u5982\u4e0b\u793a\u4f8b\u4ee3\u7801\uff1a
\u6d4b\u8bd5\u9875\u9762.test-box{width:300px;height:260px;margin:0px auto;position:relative;border:1px solid #333;}.test-box img{position:absolute;bottom:10px;left:50%;margin-left:-60px;border:0;}\u793a\u4f8b\u4e2d\u505a\u4e86\u4e00\u4e2a\u5bbd\u4e3a300px\uff0c\u9ad8\u4e3a260px\u50cf\u7d20\u7684\u5bb9\u5668\uff0c\u5176\u4e2d\u56fe\u7247\u901a\u8fc7\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u63a7\u5236\u5176\u4f4d\u4e8e\u5bb9\u5668\u7684\u6c34\u5e73\u5c45\u4e2d\uff0c\u5bb9\u5668\u5e95\u90e8\u7684\u4f4d\u7f6e\u3002bottom:10px;\u63a7\u5236\u56fe\u7247\u8ddd\u79bb\u5e95\u90e810px\uff0cleft:50%\u3001margin-left:-60px;\u63a7\u5236\u56fe\u7247\u6c34\u5e73\u5c45\u4e2d\u3002\u5176\u4e2d\u7684margin-left\u7684\u503c\u6839\u636e\u56fe\u7247\u5bbd\u5ea6\u53d8\u5316\uff0c\u4e3a\u8d1f\u7684\u4e8c\u5206\u4e4b\u4e00\u56fe\u7247\u5bbd\u5ea6\u3002

\u6700\u7ec8\u6548\u679c\u5982\u4e0b\u56fe\uff1a

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

<div style="width:wwwpx; height:hhhpx; background:url(图片url) no-repeat -lllpx -tttpx"></div>

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

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

请注意负号不能省略！

CSS
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS
浮动
请看下图，当把框
1
向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框
1
向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框
2，使框
2
从视图中消失。
如果把所有三个框都向左移动，那么框
1
向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
CSS
float
属性
在
CSS
中，我们通过
float
属性实现元素的浮动。
如需更多有关
float
属性的知识，请访问参考手册：CSS
float
属性。

扩展阅读：cad快速看图官网地址是 ... css图片样式网站 ... css 布局 文案围绕图片 ... css怎样引入图片 ... css图标大全 ... css图片切换 ... css图片居中 ... css图片轮播 动画效果 ... css图片位置 ...