切割图片这里不是真正的切割,只是用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. 帝国CMS列表模板页面内容截取

    $listtemp = '<div class="c_n_item">';$listtemp .= '<div class="c_n_title&quo ...

  2. volatile简介

    volatile简介 java语言提供了一种稍弱的内存同步机制,即volatile变量.用来确保将变量的更新操作通知到其它线程,保证了新值能立即同步到主内存,以及每次使用前立即从内存刷新.当变量声明为 ...

  3. C#生成二维码示例

    其实现在二维码越来越流行,网上也有很多生成二维码的类库.写一下WEB生成二维码注意事项吧! 目前C#生成二维码大部分都是使用ThoughtWorks.QRCode或者ZXing类库生成,主要说一下Th ...

  4. javascript基础之数组对象

    一.定义数组的方法: 定义了一个空数组: var myArray =new Array(); 指定有n个空元素的数组: var myArray=new Array(n); 定义数组并赋值: var m ...

  5. bzoj 1067: [SCOI2007]降雨量 模擬

    1067: [SCOI2007]降雨量 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2010  Solved: 503[Submit][Status] ...

  6. 那些年,我们一起学WCF--(6)PerCall实例行为

    当客户端调用服务器端服务后,服务器端就会为客户端生成一个实例,关于服务实例的分配问题,在WCF中有专门的属性进行设置,可以让所有客户端共享一个实例, 也可以让一个客户端可以拥有多个实例,也可以让一个实 ...

  7. apache端口被占用

      1.80端口被占用,先去服务里将IIS关闭掉,然后重启apache,如果还是继续弹窗the requested operation has failed...需要去Internet信息服务里面停止 ...

  8. kubernetes云平台管理实战: 高级资源deployment-滚动升级(八)

    一.通过文件创建deployment 1.创建deployment文件 [root@k8s-master ~]# cat nginx_deploy.yml apiVersion: extensions ...

  9. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  10. mongo之 ReadConcern 与 Read Preference

    一.读取关注(readConcern) 官方文档 3.2版本以后支持读取关注 读取关注允许您控制从副本集和副本集分片读取的数据的实时性,一致性和隔离性. 通过有效使用写入关注和读取关注,可以适当调整一 ...