CSS - 切割图片的方法
css教程 2015-03-04
切割图片这里不是真正的切割，只是用CSS取图片中的一部分而已。这样做的好处就是减少了打开网页时请求图片的次数。主要有两种方式，一是做为某一元素的背景图片，二是用img元素的属性。
方法一：
用CSS中元素的background : background-color || background-image || background-repeat || background-attachment || background-position
示例：
解释：
url(http://hi.csdn.net/attachment/201010/13/139538_1286966876A7AV.jpg) 表示背景图片
no-repeat 表示图片不重复
scroll 表示背景图片随浏览器下拉而滚动
-140px 表示水平位置在图片的-140px处（以图片的左上角为0,0）
-20px 表示垂直位置在图片的-20px处（以图片的左上角为0,0）
实例：
[xhtml:nogutter] view plaincopy
<html>
<head>
<style type="text/css">
a
{
width:100px;
height:35px;
background:transparent url(http://hi.csdn.net/attachment/201010/13/139538_1286966876A7AV.jpg) no-repeat scroll -20px -20px;
}
a:hover
{
width:100px;
height:35px;
background:transparent url(http://hi.csdn.net/attachment/201010/13/139538_1286966876A7AV.jpg) no-repeat scroll -140px -20px;
}
<style>
</head>
<body>
<a href="#" mce_href="#">测试</a>
</body>
</html>
方法二：
用img的clip属性中的rect，clip:rect(top right bottom left)参数说明如下：
[c-sharp:nogutter] view plaincopy
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(20px 100px 50px 20px);
}
</style>
</head>
<body>
<p><img border="0" src="http://hi.csdn.net/attachment/201010/13/139538_1286966876A7AV.jpg"/></p>
</body>
</html>
上面可以看出控制图片显示的关键在于clip:rect(20px 100px 50px 20px)这句，千万不要忘记position:absolute;这是用于使用绝对值来定位元素。
clip 是 CSS2 中的裁剪属性，用于裁剪绝对定位的元素。常用语法为：
1 | clip:rect(top, right, bottom, left) |
举个例子，在 HTML 中：
1 2 3 4 5 6 7 8 9 | <style type="text/css">img {position:absolute;clip:rect(30px, 200px, 200px, 20px);}</style><div> <img border="0" src="300x300.png" width="300" height="300"></div> |
可产生下图红色区域的效果，灰色区域的是原图中被隐藏的部分。
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT