百度拇指医生
&&&普通咨询
您的网络环境存在异常，
请输入验证码
验证码输入错误，请重新输入CSS使用图片做背景，如何精确定位图片位置 - ITeye问答
在别人网站下载图片时，总会遇到这样的图片。
对于这种图片，如何精确截取其中一部分作为背景，各位有什么好的办法没？
【当然这个‘窃取’别人的劳动成果是不对，我只是好奇怎么实现】
采纳的答案
根据你的图片做了下面的样式，主要做法是定位，切割图片，可以使用windows的画图工具先定位每个你需要的图片的位置（在下面的状态栏有坐标，得到的坐标前面加上一个负号），图片左上角为x/y对应的0/0，
background-image：相对地址指定背景图像，
background-position：指定背景图像位置，
background-repeat：背景图像如何铺排（4个值：repeat:纵向和横向上平铺、no-repeat:不平铺、repeat-x:横向上平铺、repeat-y:纵向平铺）
下面是例子，这个要多练习研究就会了。多看看CSS方面的说明
.icon {background-image: url(back_image.png)}
.head {height: 26 background-position: -42px -222 background-repeat: no-}
.btn {cursor: border:0; width: 107 height: 26 background-image: url(back_image.png); background-position: -42px -222 background-repeat: no-}
&div style="width: 107 height: 200"&
&div class="icon head" style="line-height: 26 padding-left: 20"&这是头部&/div&
&div style="border: 1px solid #cccc99; border-top: 0; height: 100%; "&
这里是内容！
&input type="button" class="btn" value="按钮"&
背景可以移动嘛。
background-position调整位置，然后调整容器大小让它只能容下一部分图片。
这样的大图不罕见啊。一张图片，一个http请求就可以传过来，不用来回取好几次。快。
已解决问题
未解决问题中国领先的IT技术网站
51CTO旗下网站
DIV+CSS解决文字与图片居中问题
DIV+CSS有很多值得学习的地方，本文通过实例向大家描述一下DIV+CSS文字与图片上下垂直居中问题，希望对你的学习有所帮助。
作者：admin来源：| 13:25
关于网页中使得文字或者图片居中的方法还是比较实用的，本文和大家重点讨论一下DIV+CSS文字与图片上下垂直居中问题，相信本文介绍一定会让你有所收获。
DIV+CSS文字与图片上下垂直居中
未设置文字和图片在同排同行时候上下垂直居中时，CSS实例图片如下:
以上&&为divcss5网网址图片，后面跟着是文字段，可见虽然图片与文字在同行，但是文字未上下垂直居中，明显图片垂直居上，文字垂直居下。
◆DIV+CSS实例代码如下：
&!DOCTYPEhtmlPUBLIC&-//W3C//DTDXHTML1.0Transitional//EN& &&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&htmlxmlns=&http://www.w3.org/1999/xhtml&&&metahttp-equiv=&Content-Type&content=&text/charset=utf-8&&DIV+CSS实例讲解测试&styletype=&text/css&&body{font-size:12} &&&&&imgsrc=&/images/divcss5.jpg&&&alt=&我是高度为37的DIVCSS5图片&DIVCSS5测试文字CSS &&&&
说明首先我们设置此网页body内文字css样式为12px。然后在html引入图片(扩展：CSS引入-CSS引用)及在图片后跟几个测试文字。你可以拷贝以上代码新建成html网页，再到浏览器中浏览此新建的网页，结果将如上图。
设置css使文字和图片同排同行时候上下垂直居中
我们只需要在CSS样式，加入CSS代码如下：
img{vertical-align:} &&
加入以上对图片设置上下居中CSS样式即可让在同排文字和图片垂直居中。
◆完整DIV+CSS代码如下：
&!DOCTYPEhtmlPUBLIC&-//W3C//DTDXHTML1.0Transitional//EN& &&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&htmlxmlns=&http://www.w3.org/1999/xhtml&&&metahttp-equiv=&Content-Type&content=&text/charset=utf-8&&CSS实例讲解测试&styletype=&text/css&&body{font-size:12} &img{vertical-align:} &&&&&imgsrc=&/images/divcss5.jpg&&&alt=&我是高度为37的DIVCSS5图片&DIVCSS5测试文字 &&&&
此网页在浏览器中浏览样式图：
我们可以观察上图或自己轻松亲自动手拷贝以上完整css代码和html源代码(源代码)即可实现和掌握css上下垂直居中技巧。
DIV+CSS延伸与提高
假如我们设置&.yangshi&的高度和line-height，要想此DIV中内容垂直居中同样我们设置vertical-align:middle即可，CSS代码如下：
.yangshiimg{vertical-align:}
这里值得说明的是高度和line-height一定要大于图片高度，否则也会出现&CSSHACK&在不同浏览器中不兼容情况。
1、单独文字垂直居中我们只需要设置CSS样式line-height属性即可。
2、文字与图片同排，在设置div高度同时再对此css样式的图片&img&样式设置vertical-align:middle垂直居中属性，如.yangshi img{vertical-align:} 。
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
原创原创热点头条头条
24H热文一周话题本月最赞
讲师：51310人学习过
讲师：31165人学习过
讲师：228406人学习过
精选博文论坛热帖下载排行
在网络应用越来越复杂的今天，传统的网络应用已经不能满足企业和用户的需要，这就对网络管理员、信息管理部门提出了更高的要求。本书介绍了...
订阅51CTO邮刊css图片在div中等比缩放 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 17时,
&无详细内容&
代码片段(1)
1.&[代码][HTML]代码&&&&
&style type="text/css"&
.suofang {MARGIN:WIDTH: 200}
.suofang img{MAX-WIDTH: 100%!HEIGHT: auto!width:expression(this.width & 200 ? "200px" :
this.width)!}
&div class="suofang"&
&img src="/img/bdlogo.gif"/&
开源中国-程序员在线工具：
相关的代码(227)
img {width:100%;}&
???不知道对不对啊
开源从代码分享开始
干什么的其它代码在一个div中有许多图片，所有小图片都要显示在大图片上方，如何用css精确定位小图片的位置呢？效果图如下
在下面的效果图中，“无光盘”、“浏览USB”、“IPod音乐”、“浏览电脑”、“HDMI1”、“HMDI2”、“设置”是小图片，“PCHOME”是大图片，所有小图片都要显示在大图片上方。
如何用css实现效果图中的效果呢？
如果把所有的小图片都设置成position:relative
13:17&&&[]
制作网页中，在网页内摆放了很多张图片，旁边做了一个显示图片的大窗口，如何实现随便点击一个图片后，在这个大窗口内显示点击的这个图片。希望大神能用代码说明啊，做两张图片的示例就好！谢谢啊！很急啊！
回复讨论(解决方案)
&ul&id=&quot
20:29&&&[]
;Content-Type& /& &title&CSS Borders DIV大图片右上角叠加小图片&/title& &meta name=&author& content=&Geovin Du 涂聚文&/& &lt
16:12&&&[]
最近发现手机QQ上面的个人资料里面有一个照片展示功能，当好友查看自己名片时，会一次展示八张图片用于展示自己。 可是这八张图片都是小图展示，我想为什么不能把八张图片合成一张大图来显示呢，这样是不是更个性化一些呢？ 于是，我想做一个小应用，用来选取图片并切割成八份，保存。由用户在QQ软件中将图片按序
18:22&&&[]
我有很多小图片，要组合成一幅地图，但是屏幕没有最终的图片大，如何将小图片组合起来呢？
而且随着动作变化地图要移动，比如按下2键，地图向上走。
回复讨论(解决方案)
用Sprite和TiledLayer类
看一下WTK2.0里面PUSHPUZZLE的原代码
WTK22\apps
-11:59&&&[]
一组图片可以左右滑动，在每一图上的不同位置分别显示后端传递的数据，这些位置是固定的。求大神指导，左右滑动已经做好了，就差这个位置怎么写数据了。十分感谢。
回复讨论(解决方案)
图片父元素相对定位&里边再加个span绝对定位
图片父元素相对定位&里边
17:01&&&[]
(); pPic-&Release(); ｝
这是我的代码，图片到是显示出来了，但是大小不统一，怎样才能缩放到统一大小啊？
还有，关于重画问题，小图片覆盖大图片，大图会有残留，这个有怎样解决啊？求帮助！！！
回复讨论(解决方案)
用一个picture等控件来显示jpg图片等，然后
-12:34&&&[]
现在有个BMP文件读入，数据存于m_pDIB里，想在对话框区域内显示出该图，对话框是IDD_DIALOG1，怎么做啊
回复讨论(解决方案)
在对话框的刷新消息函数OnPaint中绘制。可以用SetDIBitsToDevice函数。
StretchDIBits
16:44&&&[]
picturebox铺满，否则就用一部分填满。
'用GDI就可以实现 '窗体上放一个命令按钮Command1,2个图片框控件Picture1,picture2。Picture1比picture2大，在picture2中装入一张小图片。 '程序启动后，这张小图片就会铺满整个picture1
-09:34&&&[]
有两个问题&&
（1）如何将一个小图片PictureBox1&&填充到一个大的PictureBox2中，前者PictureBox1&&大小不变，要布满后者PictureBox2&&。
（2）如何将一个小图片
16:32&&&[]
我想在winForm中的pictureBox控件中放大小不一的图片。控件大小已确定。如何才能让小图片居中显示，大图片则自动显示滚动条。急用！！！！！！
回复讨论(解决方案)
应该是要判断一下读入的图片大小吧？
如果图片大小小于控件的SIZE，就设置显示方式是Center；如果大于控件的
-18:49&&&[]
如何在一个PICTUREBOX里面实现&&用一个小图片的&&平铺效果
回复讨论(解决方案)
有个属性需要设一下就好了。msdn里记得有
平铺的含义是：如果图片没有控件picturebox大，就一张一张地把picturebox铺满，否则就用一部分填满
-09:34&&&[]