首页>>网站建设>>Javascript>>经验笔记

css如何只取图片的一部分

发布时间：2019-12-08 点击：441

css如果想要只显示也就是只取图片的某一部分显示，迷糊想到了方式有：

1、图片直接用软件分割想要的部分（这里就不演示了）

2、使用背景图片的方式，前面也说过，链接在此http://www.mihuguan.com/article/157568299574.html

3、使用img中的clip 属性（本节课介绍的方法）

一：css的clip属性介绍

语法：

clip:rect(top right bottom left);

相关参数:

1、top是想要显示区域的上边框离图片顶部的距离

2、bottom是想要显示区域的下边框离图片顶部的距离

3、left是想要显示区域的左边框离图片最左边的距离

4、right是想要显示区域的右边框离图片最左边的距离

css的clip属性是用来规定一个元素的可见大小，也就是说可以设定想要显示的区域。

注意事项：

1、clip 属性剪裁绝对定位元素，意思就是说需要和position:absolute;组合使用。

2、裁剪的区域必须是矩形，并且是一个封闭的图形。

二：使用实例

如果想要使用上图中第一行第二个图片，需要量出以上四个数据,本实例取值为46px 229px 83px 193px

实例代码为：

<html>
<head>
<meta charset='utf-8'>
<link rel="styleheet" href="mystyle.css">
<title>css样式表</title>
</head>
<body>
<style>
.show{
        position:absolute;
        clip:rect(46px 229px 83px 193px);
}
</style>
<img src="/images/2.png" class="show">
</body>
</html>