css如何只取图片的一部分(css clip属性)

100人浏览 2024-09-08 08:03:38

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

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

2、使用背景图片的方式，前面也说过

3、使用img中的clip 属性（本章就是这个演示）

一：css的clip属性介绍

语法：

clip:rect(top right bottom left);

相关参数:

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

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

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

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

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

注意事项：

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

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

二：使用实例

图标合集

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

实例代码为：

<html>

<head>

<title>css样式表</title>

</head>

<body>

<style>

.show{ clip:rect(46px 229px 83px 193px); }

</style>

</body>

</html>

显示结果为：

图标

和前面使用背景方式一样。以后遇到很多素材放在一张图片上的时候就不需要抠图了，是不是很方便呢。

相关推荐