切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已,主要有两种方式,一是做为某一元素的背景图片,二是用img元素的属性。下面有个不错的示例,大家可以参考下
切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已。这样做的好处就是减少了打开网页时请求图片的次数。主要有两种方式,一是做为某一元素的背景图片,二是用img元素的属性。

方法一:

用CSS中元素的background : background-color ||
background-image || background-repeat || background-attachment ||
background-position。 示例代码如下:

 
background:transparent url(123.jpg)
no-repeat scroll -140px -20px;
解释:

transparent表示透明无颜色
url(123.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坐标(水平方向)的终点
注:坐标的起点是在左上角

示例代码:

代码如下:

img{
position:absolute;

clip:rect(20px 100px 50px 20px);
}
 
上面可以看出控制图片显示的关键在于clip:rect(20px 100px 50px 20px)这句,千万不要忘记position:absolute;这是用于使用绝对值来定位元素。

两种方法实现用CSS切割图片只取图片中一部分的更多相关文章

  1. .NET MVC中登录过滤器拦截的两种方法

    今天给大家介绍两种ASP中过滤器拦截的两种方法. 一种是EF 的HtppModule,另一种则是灵活很多针对MVC的特性类 Attribute 具体什么是特性类可以参考着篇文章:https://www ...

  2. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  3. CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)

    CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...

  4. php如何防止图片盗用/盗链的两种方法(转)

    图片防盗链有什么用? 防止其它网站盗用你的图片,浪费你宝贵的流量.本文章向大家介绍php防止图片盗用/盗链的两种方法 Apache图片重定向方法 设置images目录不充许http访问 Apache服 ...

  5. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  6. php如何防止图片盗用/盗链的两种方法

    如今的互联网,采集网站非常多,很多网站都喜欢盗链/盗用别人网站的图片,这样不仅侵犯网权,还导致被盗链的网站消耗大量的流量,给服务器造成比较大的压力,本文章向大家介绍php如何防止图片盗用/盗链的两种方 ...

  7. css划隔横线的两种方法

    css划隔横线的两种方法  方法一:用DIV,代码如下:(推荐此方法)    <div style="width:800px;height:1px;margin:0px auto;pa ...

  8. UIImage加载图片的两种方法区别

    Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路 ...

  9. AE 将地图导出为图片的两种方法

    在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...

随机推荐

  1. 约瑟夫环问题分析-C语言经典面试题

    好久没有看有关算法的问题了,今天废了不少劲,再感叹一句:要想学好算法就要常练习,没什么捷径可走.废话不多说,如下: 问题描述:有m个人,围成一个环,编号为 0.1.2.3...m-1,从第一个人开始循 ...

  2. Java 生产者模式 消费者模式

    // The standard idiom for calling the wait synchronized(sharedObject) { while(condition){ sharedObje ...

  3. win 7 普通家庭版 装IIS

    每当一个程序员入职的时候,几乎都会干一件事情,就是重装操作系统,这是一场不易之战: 1)耗时太长: 2)容易遇到怪异的系统行为. 1.win7为毛装不上VS2012 先装一个win7 x64 旗舰版, ...

  4. JAVA String 类

    java String类中的常用方法:public char charAt(int index)返回字符串中第index个字符:public int length()返回字符串的长度:public i ...

  5. 2、vs2012无法从模型更新到数据库的问题

    在模型设计视图空白处选择“从模型生成到数据库…”:不出意外的话应该是打开生成的脚本,当然也可能出现如下的错误,请下载最新的SQL Server Data Tool(我本地VS2012,数据库SQLSe ...

  6. hdu4536-XCOM Enemy Unknown(爆搜)

    XCOM-Enemy Unknown是一款很好玩很经典的策略游戏. 在游戏中,由于未知的敌人--外星人入侵,你团结了世界各大国家进行抵抗.随着游戏进展,会有很多的外星人进攻事件.每次进攻外星人会选择3 ...

  7. Android Testing Point

    The test application demonstrates these key points: An Android test is itself an Android application ...

  8. python_day06(ip代理池)

    from urllib.request import Request, ProxyHandler from urllib.request import build_opener from bs4 im ...

  9. Chronic sleep loss cannot be cured that easily

    Chronic sleep loss cannot be cured that easily Sleeping in on Saturday after a few weeks of too litt ...

  10. FortiGate软件版本升级

    1.Web界面升级 1)注意:升级前,务必做好配置备份 2)要点 1.FortiGate防火墙的每款型号都有单独的版本文件,升级前务必确认下当前的设备型号: 2.升级包的后缀名必须为.out,前缀任意 ...