如何在HTML中将图片切割

html-css015

如何在HTML中将图片切割,第1张

如果不想使用PS来编辑图片,可以在网页中直接用多个DIV+CSS实现,先设置好各个DIV的位置和大小,然后用CSS指定该图片为背景图片,只要把background-position的值计算好,就可以使DIV显示图片的不同部位,实现拼图效果。

二 按网页的结构和图片的特点进行切片切片的大水上和位置可以通过切片选项来进行调整三 选择文件菜单 另存为WEB格式命令,保存时会生成index.html 图片文件会存放在images文件夹中(CS3要选择存储为html和图片)四 使用Dreamweaver软件打开刚刚保存生成的html文件进行编辑,删除不必须的图片和进行内容的填充。切片原则和常见问题:一 切片是生成表格的依据,切片的过程要先总体后局部,即先把网页整体切分成几个大部分,再细切其中的小部分。二 对于渐变的效果或圆角等图片特殊效果,需要在页面中表现出来的,要单独切出来三 在DW中进行编辑时,少用图片,如果能用背景颜色代替的就使用背景颜色 能使用图案的也尽可能使用图案平铺来形成背景删除图片的时候记住图片的长宽,再插入一个相同长宽的表格。使用表格长宽一样的图片做为单元格的背景。

有两种方法实现

可以用css背景图片做定位(这个你可以去W3CSchool查看一下background的相关属性)

用两个元素, 块元素A和img元素B, A中嵌套B, A用"position:relative"固定宽高, 并设置overflow为hidden, B元素用"position:absolute"设置top和left,