CSS - 切割图片的方法

css教程 2015-03-04

       切割图片这里不是真正的切割,只是用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)

实例:
[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(toprightbottomleft)

举个例子,在 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>

可产生下图红色区域的效果,灰色区域的是原图中被隐藏的部分。

相关推荐

aSuncat / 0评论 2020-08-18