问题描述
在别人网站下载图片时,总会遇到这样的图片。对于这种图片,如何精确截取其中一部分作为背景,各位有什么好的办法没?【当然这个‘窃取’别人的劳动成果是不对,我只是好奇怎么实现】
解决方案
根据你的图片做了下面的样式,主要做法是定位,切割图片,可以使用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: 26px; background-position: -42px -222px; background-repeat: no-repeat;}.btn {cursor:pointer; border:0; width: 107px; height: 26px; background-image: url(back_image.png); background-position: -42px -222px; background-repeat: no-repeat;}<div style="width: 107px; height: 200px;"><div class="icon head" style="line-height: 26px; padding-left: 20px;">这是头部</div><div style="border: 1px solid #cccc99; border-top: 0; height: 100%; ">这里是内容!</div></div><br /><input type="button" class="btn" value="按钮">
解决方案二:
背景可以移动嘛。background-position调整位置,然后调整容器大小让它只能容下一部分图片。这样的大图不罕见啊。一张图片,一个http请求就可以传过来,不用来回取好几次。快。参考:http://www.w3.org/TR/CSS21/colors.html#propdef-background-position