`
dowhathowtodo
  • 浏览: 771338 次
文章分类
社区版块
存档分类
最新评论

用CSS来“切割”图片

 
阅读更多

这里所说的切割不是真正的切割哈,只是用CSS取图片中的一部分而已。这样做有很多好处哦,最大的好处就是减少了打开网页时请求图片的次数。主要有两种方式,一是做为某一元素的背景图片,二是用<img>元素的属性。下面就来看看如何做哈!

方式一:

用CSS中元素的background : background-color || background-image || background-repeat || background-attachment || background-position

示例:background:transparent url(http://hi.csdn.net/attachment/201010/13/139538_1286966876A7AV.jpg) no-repeat scroll -140px -20px;

解释:transparent表示透明无颜色
url(http://hi.csdn.net/attachment/201010/13/139538_1286966876A7AV.jpg) 表示背景图片
no-repeat 表示图片不重复
scroll 表示背景图片随浏览器下拉而滚动
-140px 表示水平位置在图片的-140px处(以图片的左上角为0,0)
-20px 表示垂直位置在图片的-20px处(以图片的左上角为0,0)

实例:

方式二:

用img的clip属性中的rect,clip:rect(y1 y1 x2 x1)参数说明如下:

y1=定位的y坐标(垂直方向)的起点

x1=定位的x坐标(水平方向)的起点

y2=定位的y坐标(垂直方向)的终点

x2=定位的x坐标(水平方向)的终点

注:坐标的起点是在左上角

我们不难看出,控制图片显示的关键在于clip:rect(20px 100px 50px 20px)这句,

但是千万不要遗漏了position:absolute;这是用于使用绝对值来定位元素

分享到:
评论

相关推荐

    CSS切割图片

    教你怎么用CSS切割图片,挖出你要的部分,有图和源码

    两种方法实现用CSS切割图片只取图片中一部分

    切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已。这样做的好处就是减少了打开网页时请求图片的次数。主要有两种方式,一是做为某一元素的背景图片,二是用img元素的属性。 方法一: 用CSS中元素的...

    CSS3文字斜线切割分裂动画特效

    CSS3基于clip剪裁属性制作的一款文字斜线切割分裂动画特效,鼠标悬停文字切割两断动画效果。

    css sprites技术 CSS Sprites图片切割术与图片优化深入理解

    很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究。 近段时间一直在做前台的一些东西,涉及到很多div+css的问题。这个东东我又碰到了,所以我花了点时间去网上了解...

    使用CSS实现图片分割效果的简单方法介绍

    我们来看一个例子,大家肯定能明白css是怎么样实现分割图片的。 CSS Code复制内容到剪贴板 &lt;HTML&gt;  &lt;head&gt;  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf8" /&gt;  ...

    Div+CSS 布局大全

    现属性用什么 CSS 来代替。 结构化 HTML 我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用 Photoshop 或者 Fireworks 画出来、切割成小图。最后再通过编辑 ...

    图片切割生成HTML代码合并(GIFfyCutter)v2.8英文免费安装版

    图片切割生成HTML代码合并(GIFfyCutter) 可用于网页制作中对较大图片的处理,软件功能强大,它可以将一张大图分割成多个小图片,并生成可以合并显示的HTML代码,如果单张图片体积较大,在网页打开时会比较慢,使用...

    css3背景与边框

    一旦使用了fill关键字,源图片的中心块将作为该元素的背景。 border-image-slice: 25 11 fill; 注意:slice不接受负值;如果slice切割的左右距离之和大于背景图的宽,则上下边框不显示。如果slice切割的上下距离之和...

    jQuery倾斜分割布局幻灯片切换特效

    这是一款非常有创意滑动鼠标滚轮控制切换的jQuery+CSS3网页倾斜分割布局幻灯片切换特效。

    DIV+CSS布局入门

    当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表,详细列出原来的表现属性用什么CSS来代替。 结构化HTML 我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案...

    CSS实现的图片宽高自适应固定边框

    以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。

    DIV+CSS的网站设计教程下载

    当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表,详细列出原来的表现属性用什么CSS来代替。  结构化HTML  我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局...

    CSS 实现的图片宽高自适应固定边框

    以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。

    CSS——ajax特效\获取鼠标位置

    呵呵,各种获取鼠标位置的方法,很好的, 可以用于上传图片切割啊啥的

    PuzzleGame.zip

    使用H5 canvas、css和JavaScript技术实现滑动拼图游戏。游戏划分为简单级别和复杂级别。主要指的是图片划分的行列数不一样,这里的等级可以自己设定。页面载入完成,即可选择游戏等级和图片,进行拼图。页面加载完成...

    javascript实现的图片切割多块效果实例

    主要介绍了javascript实现的图片切割多块效果,涉及javascript操作图片及css样式的技巧,需要的朋友可以参考下

    (PC+WAP)蓝色机械设备网站源码 金属切割设备类PbootCMS网站模板

    PbootCMS内核开发的网站模板,该模板适用于切割设备网站、机械设备网站等企业,当然其他行业也可以做,只需要把文字图片换成其他行业的即可; PC+WAP,同一个后台,数据即时同步,简单适用!附带测试数据! 友好的...

Global site tag (gtag.js) - Google Analytics