时间:2016-01-22 07:27 来源: 我爱IT技术网 作者:佚名
本文所分享的知识点是【两种方法实现用CSS切割图片只取图片中一部分】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
两种方法实现用CSS切割图片只取图片中一部分
切割图片这里不是真正的切割，只是用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切割图片只取图片中一部分的相关讨论如下：
相关问题：请问，html+css如何只显示图片中的一部分内容？
答：你给的这个例子没有任何问题啊，就是按照你的要求只显示图片中的一部分啊 >>详细
相关问题：CSS切图问题,所有背景图标都集合在一张图上,这图是...
答：是sprite吧，这种方法用来处理背景图片比较好，可以省去不少请求数量。 用作背景：设置一个元素的高宽，通过background-position调整背景图的位置，使需要的部分露出来，其余地方被隐掉。 用作一般图片：与上面原理相同，只不过是设置该图片的pi... >>详细
相关问题：div+css问题，点击图片中的某一部分 连接到另一个页面
答：把图片设成背景，用定位，取你想点击的地方 >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-